function RetroWindow({ title = "Window", defaultPosition = { x: 0, y: 0 }, children }) { const [position, setPosition] = useState(defaultPosition); const [isDragging, setIsDragging] = useState(false); const [isMinimized, setIsMinimized] = useState(false); const [isMaximized, setIsMaximized] = useState(false); const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 }); const handleMouseDown = (e)=>{ setIsDragging(true); setDragOffset({ x: e.clientX - position.x, y: e.clientY - position.y }); }; const handleMouseMove = useCallback((e)=>{ if (isDragging && !isMaximized) { setPosition({ x: e.clientX - dragOffset.x, y: e.clientY - dragOffset.y }); } }, [ isDragging, dragOffset, isMaximized ]); const handleMouseUp = ()=>{ setIsDragging(false); }; useEffect(()=>{ if (isDragging) { window.addEventListener("mousemove", handleMouseMove); window.addEventListener("mouseup", handleMouseUp); } return ()=>{ window.removeEventListener("mousemove", handleMouseMove); window.removeEventListener("mouseup", handleMouseUp); }; }, [ isDragging, handleMouseMove ]); const windowStyle = { transform: isMaximized ? "none" : `translate(${position.x}px, ${position.y}px)`, width: isMaximized ? "100%" : "auto", height: isMaximized ? "100%" : "auto", position: isMaximized ? "fixed" : "absolute", top: isMaximized ? 0 : "auto", left: isMaximized ? 0 : "auto" }; return /*#__PURE__*/ React.createElement("div", { className: `${isMinimized ? "hidden" : "block"} bg-[#c0c0c0] shadow-lg border-t-[#ffffff] border-l-[#ffffff] border-b-[#808080] border-r-[#808080] border-2`, style: windowStyle, __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center bg-[#000080] text-white px-1 cursor-move", onMouseDown: handleMouseDown, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-grow font-sans text-sm py-0.5", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "flex gap-1", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMinimized(true), className: "bg-[#c0c0c0] text-black w-5 h-5 flex items-center justify-center border-t-[#ffffff] border-l-[#ffffff] border-b-[#808080] border-r-[#808080] border", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-window-minimize text-xs", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMaximized(!isMaximized), className: "bg-[#c0c0c0] text-black w-5 h-5 flex items-center justify-center border-t-[#ffffff] border-l-[#ffffff] border-b-[#808080] border-r-[#808080] border", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fa-solid ${isMaximized ? "fa-window-restore" : "fa-window-maximize"} text-xs`, __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsMinimized(true), className: "bg-[#c0c0c0] text-black w-5 h-5 flex items-center justify-center border-t-[#ffffff] border-l-[#ffffff] border-b-[#808080] border-r-[#808080] border", __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa-solid fa-xmark text-xs", __source: { fileName: "", lineNumber: 87, columnNumber: 13 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-[#c0c0c0] min-w-[200px] min-h-[100px]", __source: { fileName: "", lineNumber: 91, columnNumber: 7 }, __self: this }, children)); } function RetroWindowStory() { return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen bg-[#008080] p-4", __source: { fileName: "", lineNumber: 100, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RetroWindow, { title: "My Window", defaultPosition: { x: 50, y: 50 }, __source: { fileName: "", lineNumber: 101, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, "Window Content Here")), /*#__PURE__*/ React.createElement(RetroWindow, { title: "Another Window", defaultPosition: { x: 150, y: 150 }, __source: { fileName: "", lineNumber: 104, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 108, columnNumber: 9 }, __self: this }, "Different Content Here"))); } function DesktopIcon({ icon = "💾", label = "My Icon", onClick }) { return /*#__PURE__*/ React.createElement("button", { onClick: onClick, className: "flex flex-col items-center justify-center p-2 hover:bg-[#0000ff20] rounded w-[80px] h-[80px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-3xl image-pixelated", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, icon), /*#__PURE__*/ React.createElement("span", { className: "text-xs text-white mt-1 font-roboto text-center break-words w-full", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, label), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 11, columnNumber: 7 }, __self: this }, ` .image-pixelated { image-rendering: pixelated; } `)); } function DesktopIconStory() { return /*#__PURE__*/ React.createElement("div", { className: "bg-[#000033] p-4 grid grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DesktopIcon, { icon: "📁", label: "Documents", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DesktopIcon, { icon: "🎮", label: "Games", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DesktopIcon, { icon: "🗑️", label: "Recycle Bin", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DesktopIcon, { icon: "💻", label: "My Computer", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DesktopIcon, { icon: "🌐", label: "Internet Explorer", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DesktopIcon, { icon: "📝", label: "Notepad", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this })); } function StartMenu({ onShutdown = ()=>{} }) { const [isOpen, setIsOpen] = useState(false); const programs = [ { id: 1, name: "File Explorer", icon: "fa-folder" }, { id: 2, name: "Word Processor", icon: "fa-file-word" }, { id: 3, name: "Calculator", icon: "fa-calculator" }, { id: 4, name: "Paint", icon: "fa-paint-brush" }, { id: 5, name: "Games", icon: "fa-gamepad" } ]; return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsOpen(!isOpen), className: "bg-[#c0c0c0] border-t-[#ffffff] border-l-[#ffffff] border-b-[#808080] border-r-[#808080] border-2 px-4 py-1 flex items-center gap-2 hover:bg-[#d0d0d0] active:border-t-[#808080] active:border-l-[#808080] active:border-b-[#ffffff] active:border-r-[#ffffff]", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-windows text-[#008080]", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-ms-sans", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "Start")), isOpen && /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-full left-0 w-64 bg-[#c0c0c0] border-t-[#ffffff] border-l-[#ffffff] border-b-[#808080] border-r-[#808080] border-2", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#808080] p-2 flex items-center", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-ms-sans text-white transform -rotate-90", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Windows 95")), /*#__PURE__*/ React.createElement("div", { className: "py-2", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, programs.map((program)=>/*#__PURE__*/ React.createElement("div", { key: program.id, className: "px-4 py-2 flex items-center gap-3 hover:bg-[#000080] hover:text-white cursor-pointer", __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${program.icon} w-4`, __source: { fileName: "", lineNumber: 36, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-ms-sans", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, program.name))), /*#__PURE__*/ React.createElement("div", { className: "border-t border-[#808080] mt-2", __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { onClick: onShutdown, className: "px-4 py-2 flex items-center gap-3 hover:bg-[#000080] hover:text-white cursor-pointer", __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-power-off w-4", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-ms-sans", __source: { fileName: "", lineNumber: 47, columnNumber: 17 }, __self: this }, "Shut Down...")))))); } function StartMenuStory() { return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#008080] p-4 flex items-end", __source: { fileName: "", lineNumber: 59, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(StartMenu, { onShutdown: ()=>alert("Shutting down..."), __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this })); } function RetroEmailClient({ folders = [], messages = [], selectedFolder = "Inbox", onFolderSelect, onMessageSelect }) { const [selectedMessage, setSelectedMessage] = useState(null); const defaultFolders = [ { id: "inbox", name: "Inbox", icon: "fa-inbox" }, { id: "sent", name: "Sent Items", icon: "fa-paper-plane" }, { id: "drafts", name: "Drafts", icon: "fa-file" }, { id: "deleted", name: "Deleted Items", icon: "fa-trash" } ]; const defaultMessages = [ { id: 1, subject: "Welcome to Outlook Express", from: "system@mail.com", date: "2024-01-20", preview: "Thank you for using Outlook Express..." }, { id: 2, subject: "Meeting Tomorrow", from: "boss@company.com", date: "2024-01-19", preview: "Let's discuss the project status..." }, { id: 3, subject: "Newsletter", from: "news@tech.com", date: "2024-01-18", preview: "Latest updates in technology..." } ]; return /*#__PURE__*/ React.createElement(React.Fragment, null); } function RetroEmailClientStory() { const [selectedFolder, setSelectedFolder] = useState("Inbox"); return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 50, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(RetroEmailClient, { selectedFolder: selectedFolder, onFolderSelect: setSelectedFolder, __source: { fileName: "", lineNumber: 51, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activeWindows, setActiveWindows] = useState([]); const [isStartMenuOpen, setIsStartMenuOpen] = useState(false); const [currentTime, setCurrentTime] = useState(new Date()); useEffect(()=>{ const timer = setInterval(()=>{ setCurrentTime(new Date()); }, 1000); return ()=>clearInterval(timer); }, []); const openWindow = (windowType)=>{ setActiveWindows((prev)=>[ ...prev, windowType ]); setIsStartMenuOpen(false); }; const closeWindow = (index)=>{ setActiveWindows((prev)=>prev.filter((_, i)=>i !== index)); }; return /*#__PURE__*/ React.createElement("div", { className: "h-screen w-full bg-[#008080] relative overflow-hidden p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0 bg-[url('/wallpaper.jpg')] bg-cover bg-center opacity-50", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-4 gap-4 relative", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null), /*#__PURE__*/ React.createElement(React.Fragment, null)), activeWindows.map((window, index)=>{ if (window === "email") { return /*#__PURE__*/ React.createElement(React.Fragment, null); } if (window === "documents") { return /*#__PURE__*/ React.createElement(React.Fragment, null); } if (window === "recyclebin") { return /*#__PURE__*/ React.createElement(React.Fragment, null); } }), /*#__PURE__*/ React.createElement("div", { className: "fixed bottom-0 left-0 right-0 bg-[#c0c0c0] h-10 flex items-center px-2 shadow-[inset_-1px_-1px_#0a0a0a,inset_1px_1px_#dfdfdf]", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsStartMenuOpen(!isStartMenuOpen), className: "px-4 py-1 bg-[#c0c0c0] font-ms-sans shadow-[inset_-1px_-1px_#0a0a0a,inset_1px_1px_#dfdfdf] hover:bg-[#d4d4d4] active:shadow-[inset_1px_1px_#0a0a0a,inset_-1px_-1px_#dfdfdf]", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "Start"), /*#__PURE__*/ React.createElement("div", { className: "ml-auto bg-[#c0c0c0] px-4 py-1 font-ms-sans shadow-[inset_1px_1px_#0a0a0a,inset_-1px_-1px_#dfdfdf]", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, currentTime.toLocaleTimeString())), isStartMenuOpen && /*#__PURE__*/ React.createElement(React.Fragment, null)); }