function MainComponent() { const desktopIcons = [ "Folder", "Settings", "Trash" ]; const taskbarApps = [ "Finder", "Mail", "Browser", "Music", "Photos" ]; const draggableWindows = [ "Notes", "Calculator", "Calendar" ]; const [positions, setPositions] = React.useState({}); const [activeApp, setActiveApp] = React.useState(null); const [liveWallpaper, setLiveWallpaper] = React.useState(true); const [backgroundImage, setBackgroundImage] = React.useState("./live-wallpaper.gif"); const onDragStart = (event, iconName)=>{ event.dataTransfer.setData("iconName", iconName); event.currentTarget.style.opacity = "0.4"; }; const onDragEnd = (event, icon)=>{ event.currentTarget.style.opacity = "1"; const rect = event.currentTarget.getBoundingClientRect(); setPositions((prevPositions)=>({ ...prevPositions, [icon]: { x: rect.left, y: rect.top } })); }; const handleAppClick = (appName)=>{ setActiveApp(appName); }; const toggleWallpaper = ()=>{ setLiveWallpaper(!liveWallpaper); }; const handleBackgroundChange = (event)=>{ setBackgroundImage(event.target.value); }; const desktopBackgroundClass = liveWallpaper ? 'bg-live-wallpaper-animation' : 'bg-[#ededed]'; const liveWallpaperImg = /*#__PURE__*/ React.createElement("img", { src: backgroundImage, alt: `Background preview showing ${backgroundImage.split('/').pop()}`, className: "absolute inset-0 w-full h-full object-cover", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }); return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col h-screen ${desktopBackgroundClass}`, __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 p-4 relative", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, liveWallpaper ? liveWallpaperImg : null, /*#__PURE__*/ React.createElement("select", { name: "wallpaper-selector", onChange: handleBackgroundChange, className: "absolute top-4 left-4 p-2 bg-[#ffffffcc] rounded text-[#000] font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "./live-wallpaper.gif", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Live Wallpaper"), /*#__PURE__*/ React.createElement("option", { value: "./image1.jpg", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Image 1"), /*#__PURE__*/ React.createElement("option", { value: "./image2.jpg", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "Image 2"), /*#__PURE__*/ React.createElement("option", { value: "./image3.jpg", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Image 3")), /*#__PURE__*/ React.createElement("button", { onClick: toggleWallpaper, className: "absolute top-4 right-4 p-2 bg-[#ffffffcc] rounded-full text-[#000] font-roboto", name: "toggle-wallpaper", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, liveWallpaper ? '🌜' : '🌞')), /*#__PURE__*/ React.createElement("div", { className: "w-full h-14 bg-[#2c2c2c] fixed bottom-0 flex items-center justify-start overflow-hidden", __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, taskbarApps.map((app, index)=>/*#__PURE__*/ React.createElement("div", { key: app, onClick: ()=>handleAppClick(app), className: `flex flex-col items-center justify-center w-14 h-full text-white cursor-pointer ${app === activeApp ? 'bg-[#555]' : 'hover:bg-[#555]'}`, __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa fa-${app.toLowerCase()} text-lg`, __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, ` .bg-live-wallpaper-animation { animation: slidebg 30s linear infinite; } @keyframes slidebg { to { background-position: 200% center; } } `)); }