function MainComponent() { const desktopIcons = [ "Folder", "Settings", "Trash" ]; const taskbarApps = [ "Finder", "Mail", "Browser", "Music" ]; const [activeApp, setActiveApp] = React.useState(null); const [windows, setWindows] = React.useState([ { id: 1, x: 10, y: 10 }, { id: 2, x: 20, y: 20 }, { id: 3, x: 30, y: 30 } ]); const handleDragStart = (e, id)=>{ const window = windows.find((win)=>win.id === id) || { id }; e.dataTransfer.setData('application/reactflow', JSON.stringify(window)); e.dataTransfer.effectAllowed = 'move'; }; const handleDragOver = (e)=>{ e.preventDefault(); }; const handleDrop = (e, droppedIconId)=>{ e.preventDefault(); const data = e.dataTransfer.getData('application/reactflow'); const { id, x, y } = JSON.parse(data); const newX = e.clientX - e.target.getBoundingClientRect().left; const newY = e.clientY - e.target.getBoundingClientRect().top; if (windows.find((win)=>win.id === id)) { setWindows(windows.map((win)=>win.id === id ? { ...win, x: newX, y: newY } : win)); } else { setWindows(windows.concat({ id: windows.length + 1, x: newX, y: newY })); } }; const handleClickApp = (app)=>{ setActiveApp(app); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full bg-[#ededed] flex flex-col", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, windows.map((window)=>/*#__PURE__*/ React.createElement("div", { key: window.id, draggable: true, onDragStart: (e)=>handleDragStart(e, window.id), className: "absolute", style: { top: window.y, left: window.x, width: '200px', height: '200px', background: '#ffffff', boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)', padding: '16px', display: 'flex', flexDirection: 'column' }, __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[40px] bg-[#bbbbbb] p-2 cursor-move", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Window ", window.id), /*#__PURE__*/ React.createElement("div", { className: "flex-1", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-8 gap-4 p-4", onDragOver: handleDragOver, onDrop: handleDrop, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, desktopIcons.map((icon)=>/*#__PURE__*/ React.createElement("div", { key: icon, draggable: true, onDragStart: (e)=>handleDragStart(e, icon), className: "desktop-icon w-[100px] h-[100px] bg-[#dcdcdc] rounded-md shadow text-center flex flex-col justify-center items-center", onDrop: (e)=>handleDrop(e, icon), __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-2xl", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": icon, __source: { fileName: "", lineNumber: 55, columnNumber: 15 }, __self: this }, "📁")), /*#__PURE__*/ React.createElement("div", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }, icon)))), /*#__PURE__*/ React.createElement("div", { className: "w-full h-12 bg-[#333333] flex items-center px-4", __source: { fileName: "", lineNumber: 61, columnNumber: 7 }, __self: this }, taskbarApps.map((app)=>/*#__PURE__*/ React.createElement("div", { key: app, className: `text-white font-roboto text-sm flex items-center mx-2 ${activeApp === app ? 'bg-[#555555] rounded' : ''}`, onClick: ()=>handleClickApp(app), __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa fa-${app.toLowerCase()} mr-1`, __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }), " ", app))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, ` .desktop-icon { transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .desktop-icon:active { transform: scale(1.05); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2); } `)); }