function MainComponent({ title, outputText, onPower, onPlay, onPause, onStop, onFullScreen, isDarkMode }) { const bgClass = 'bg-white'; const textColorClass = 'text-gray-800'; const bgColorClass = 'bg-[#1e293b]'; const hoverBgColorClass = 'hover:bg-gray-300'; return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "mx-2 sm:mx-6 md:mx-8 lg:mx-16 xl:mx-24 2xl:mx-36 p-6 bg-white border border-[#D1D5DB] shadow-lg rounded-lg mt-4 mb-16", role: "region", "aria-labelledby": "vmDisplayHeading", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { id: "vmDisplayHeading", className: "text-xl md:text-2xl font-roboto font-bold text-gray-800", contentEditable: true, __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: `relative text-gray-800 w-full h-[300px] sm:h-[400px] md:h-[500px] lg:h-[600px] ${bgColorClass}`, "aria-live": "polite", "aria-atomic": "true", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 m-auto flex items-center justify-center flex-col", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-xl font-roboto", contentEditable: true, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }, outputText)))), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onPower, className: `py-1 px-2 ${bgColorClass} rounded ${hoverBgColorClass} ${textColorClass} font-bold`, __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-power-off", "aria-hidden": "true", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }), " Power"), /*#__PURE__*/ React.createElement("button", { onClick: onPlay, className: `py-1 px-2 ${bgColorClass} rounded ${hoverBgColorClass} ${textColorClass} font-bold`, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play", "aria-hidden": "true", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }), " Play"), /*#__PURE__*/ React.createElement("button", { onClick: onPause, className: `py-1 px-2 ${bgColorClass} rounded ${hoverBgColorClass} ${textColorClass} font-bold`, __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pause", "aria-hidden": "true", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), " Pause"), /*#__PURE__*/ React.createElement("button", { onClick: onStop, className: `py-1 px-2 ${bgColorClass} rounded ${hoverBgColorClass} ${textColorClass} font-bold`, __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop", "aria-hidden": "true", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), " Stop"), /*#__PURE__*/ React.createElement("button", { onClick: onFullScreen, className: `py-1 px-2 ${bgColorClass} rounded ${hoverBgColorClass} ${textColorClass} font-bold`, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-expand", "aria-hidden": "true", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }), " Full Screen")), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)); } function StoryComponent() { const [vmStatus, setVmStatus] = React.useState(''); const handlePower = ()=>{ // Call API to power on/off the VM }; const handlePlay = ()=>{ // Call API to play the VM }; const handlePause = ()=>{ // Call API to pause the VM }; const handleStop = ()=>{ // Call API to stop the VM }; const handleFullScreen = ()=>{ // Call API to set the VM to full screen }; const [isDarkMode, setIsDarkMode] = React.useState(false); // Mock API response for VM status React.useEffect(()=>{ setVmStatus('VM is offline'); }, []); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "Virtual Machine Display", outputText: vmStatus, onPower: handlePower, onPlay: handlePlay, onPause: handlePause, onStop: handleStop, onFullScreen: handleFullScreen, isDarkMode: isDarkMode, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this })); }