import { Fragment , useEffect } from 'react' ; import { Dialog , Transition } from '@headlessui/react' ; import { XTerm } from 'xterm-for-react' ; import React from 'react' ; export default function InstallPackagesDialog ( props ) { const xtermRef = React . useRef < any > ( null ) ; useEffect ( ( ) => { if ( xtermRef . current != null ) { console . log ( xtermRef . current . terminal ) ; xtermRef . current . terminal . writeln ( "Hello, World!" ) ; } } , [ ] ) ; return ( < Transition . Root show = { props . open } as = { Fragment } > < Dialog as = "div" auto - reopen = "true" className = "fixed z-10 inset-0 overflow-y-auto" onClose = { props . onClose } > < div className = "flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0" > < Transition . Child as = { Fragment } enter = "ease-out duration-300" enterFrom = "opacity-0" enterTo = "opacity-100" leave = "ease-in duration-200" leaveFrom = "opacity-100" leaveTo = "opacity-0" > < Dialog . Overlay className = "fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" / > < /Transition.Child> { } < span className = "hidden sm:inline-block sm:align-middle sm:h-screen" aria - hidden = "true" > & # 8203 ; < /span> < Transition . Child as = { Fragment } enter = "ease-out duration-300" enterFrom = "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" enterTo = "opacity-100 translate-y-0 sm:scale-100" leave = "ease-in duration-200" leaveFrom = "opacity-100 translate-y-0 sm:scale-100" leaveTo = "opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > < div className = "inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6 min-h-screen w-48" > < XTerm ref = { xtermRef } className = "w-96 h-96" > < /XTerm> < /div> < /Transition.Child> < /div> < /Dialog> < /Transition.Root>); }