function MacOsWindowTemplate({ title, onClose, onMinimize, onExpand }) { return /*#__PURE__*/ React.createElement("div", { className: "w-[600px] h-[400px] bg-white shadow-lg rounded-lg overflow-hidden", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F0F0] p-4 flex items-center", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: onClose, className: "bg-red-500 w-3 h-3 rounded-full mr-2", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: onMinimize, className: "bg-yellow-500 w-3 h-3 rounded-full mr-2", __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: onExpand, className: "bg-green-500 w-3 h-3 rounded-full", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "ml-4 font-roboto text-[#333]", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, title)), /*#__PURE__*/ React.createElement("div", { className: "p-6", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MacOsWindowTemplateStory() { const handleClose = ()=>alert('Close'); const handleMinimize = ()=>alert('Minimize'); const handleExpand = ()=>alert('Expand'); return /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-screen bg-[#EDEDED]", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MacOsWindowTemplate, { title: "My macOS-Inspired Window", onClose: handleClose, onMinimize: handleMinimize, onExpand: handleExpand, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [apps, setApps] = React.useState([ { id: 1, name: 'App 1', isOpen: false, isMinimized: false, windows: [] }, { id: 2, name: 'App 2', isOpen: false, isMinimized: false, windows: [] }, { id: 3, name: 'App 3', isOpen: false, isMinimized: false, windows: [] }, { id: 4, name: 'App 4', isOpen: false, isMinimized: false, windows: [] }, { id: 5, name: 'App 5', isOpen: false, isMinimized: false, windows: [] }, { id: 6, name: 'Settings', isOpen: false, isMinimized: false, windows: [] } ]); const [timeFormat, setTimeFormat] = React.useState("HH:MM"); const [taskbarIconsAlignment, setTaskbarIconsAlignment] = React.useState("center"); const [systemAccentColor, setSystemAccentColor] = React.useState("#4F46E5"); const openNewWindow = (id)=>{ setApps(apps.map((app)=>app.id === id && app.windows.length < 10 ? { ...app, isOpen: true, windows: [ ...app.windows, { id: Date.now(), isMinimized: false } ] } : app)); }; const toggleApp = (id, action, windowId)=>{ setApps(apps.map((app)=>app.id === id ? { ...app, windows: app.windows.map((window)=>window.id === windowId ? { ...window, isMinimized: action === 'minimize' ? !window.isMinimized : false } : window), isOpen: app.windows.some((window)=>!window.isMinimized) } : app)); }; const closeWindow = (id, windowId)=>{ setApps(apps.map((app)=>app.id === id ? { ...app, isOpen: app.windows.filter((window)=>window.id !== windowId).some((window)=>!window.isMinimized), windows: app.windows.filter((window)=>window.id !== windowId) } : app)); }; const applySettings = ()=>{}; const currentTime = React.useMemo(()=>{ const options = { hourCycle: 'h23', hour: '2-digit', minute: '2-digit', hour12: false }; if (timeFormat === "HH:MM") { options.hour12 = false; } else { options.hour12 = true; } return new Date().toLocaleTimeString([], options); }, [ timeFormat ]); React.useEffect(()=>{ const handleRightClick = (event, appId)=>{ event.preventDefault(); openNewWindow(appId); }; const icons = document.querySelectorAll('.taskbar-icon'); icons.forEach((icon)=>{ icon.addEventListener('contextmenu', (event)=>handleRightClick(event, parseInt(icon.dataset.appid))); }); return ()=>{ icons.forEach((icon)=>{ icon.removeEventListener('contextmenu', handleRightClick); }); }; }, [ apps ]); return /*#__PURE__*/ React.createElement("div", { className: "w-full h-screen bg-gradient-to-br from-[#89F7FE] to-[#66A6FF]", __source: { fileName: "", lineNumber: 75, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 h-[60px] bg-[#00000080] flex items-center justify-between", __source: { fileName: "", lineNumber: 76, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `flex ${taskbarIconsAlignment === 'center' ? 'justify-center' : 'justify-start'} items-center space-x-4 flex-grow`, __source: { fileName: "", lineNumber: 77, columnNumber: 9 }, __self: this }, apps.map((app)=>/*#__PURE__*/ React.createElement("div", { key: app.id, className: "flex flex-col items-center", onContextMenu: (e)=>e.preventDefault(), __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-[40px] h-[40px] bg-[#D1D5DB] rounded-full cursor-pointer flex justify-center items-center text-xs font-roboto text-black taskbar-icon`, "data-appid": app.id, onClick: ()=>{ if (app.windows.some((window)=>!window.isMinimized)) { const frontWindow = app.windows.find((window)=>!window.isMinimized); toggleApp(app.id, 'minimize', frontWindow.id); } else if (app.windows.length > 0) { const minimizedWindow = app.windows.find((window)=>window.isMinimized); toggleApp(app.id, 'minimize', minimizedWindow.id); } else if (app.windows.length < 10) { openNewWindow(app.id); } }, __source: { fileName: "", lineNumber: 80, columnNumber: 15 }, __self: this }, app.name), /*#__PURE__*/ React.createElement("span", { style: { height: '4px', width: '4px', borderRadius: '50%', backgroundColor: app.isOpen ? app.windows.some((window)=>window.isMinimized) ? '#808080' : systemAccentColor : 'transparent', marginTop: '2px' }, __source: { fileName: "", lineNumber: 93, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center mr-8 text-white font-roboto", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, currentTime)), apps.map((app)=>app.windows.map((window)=>!window.isMinimized && /*#__PURE__*/ React.createElement(MacOsWindowTemplate, { key: window.id, title: app.name, onClose: ()=>closeWindow(app.id, window.id), onMinimize: ()=>toggleApp(app.id, 'minimize', window.id), onExpand: ()=>{}, __source: { fileName: "", lineNumber: 104, columnNumber: 13 }, __self: this }, app.name === 'Settings' ? /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 106, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "timeFormat", className: "block mb-2 text-sm font-bold", __source: { fileName: "", lineNumber: 107, columnNumber: 19 }, __self: this }, "Time Format"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "timeFormat", value: timeFormat, onChange: (e)=>setTimeFormat(e.target.value), className: "border rounded p-2 w-full", placeholder: "HH:MM", __source: { fileName: "", lineNumber: 108, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "taskbarIconsAlignment", className: "block mb-2 text-sm font-bold mt-4", __source: { fileName: "", lineNumber: 109, columnNumber: 19 }, __self: this }, "Taskbar Icons Alignment"), /*#__PURE__*/ React.createElement("select", { name: "taskbarIconsAlignment", value: taskbarIconsAlignment, onChange: (e)=>setTaskbarIconsAlignment(e.target.value), className: "border rounded p-2 w-full", __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "center", __source: { fileName: "", lineNumber: 111, columnNumber: 21 }, __self: this }, "Center"), /*#__PURE__*/ React.createElement("option", { value: "left", __source: { fileName: "", lineNumber: 112, columnNumber: 21 }, __self: this }, "Left")), /*#__PURE__*/ React.createElement("label", { htmlFor: "systemAccentColor", className: "block mb-2 text-sm font-bold mt-4", __source: { fileName: "", lineNumber: 114, columnNumber: 19 }, __self: this }, "System Accent Color"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "systemAccentColor", value: systemAccentColor, onChange: (e)=>setSystemAccentColor(e.target.value), className: "border rounded p-2 w-full", placeholder: "#4F46E5", __source: { fileName: "", lineNumber: 115, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: applySettings, className: "mt-4 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded float-right", __source: { fileName: "", lineNumber: 116, columnNumber: 19 }, __self: this }, "Apply")) : /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 121, columnNumber: 17 }, __self: this }, "Content of ", app.name)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes enlarge { from { transform: scale(0.5); } to { transform: scale(1); } } @keyframes shrink { from { transform: scale(1); } to { transform: scale(0.5); } } .taskbar-icon { animation: fadeIn 0.5s ease-out, enlarge 0.5s ease-out; } `)); }