diff --git a/src/components/Desktop/Desktop.css b/src/components/Desktop/Desktop.css new file mode 100644 index 0000000..6876378 --- /dev/null +++ b/src/components/Desktop/Desktop.css @@ -0,0 +1,21 @@ +.desktop { + position: fixed; + inset: 0; + background-size: cover; + overflow: hidden; +} + +.desktop-icons { + position: absolute; + top: calc(var(--menubar-height) + 16px); + right: 16px; + display: grid; + grid-template-columns: repeat(2, 80px); + gap: 8px; +} + +.desktop-icon-cell { + display: flex; + align-items: center; + justify-content: center; +} diff --git a/src/components/Desktop/Desktop.tsx b/src/components/Desktop/Desktop.tsx index a915dc7..1bbede8 100644 --- a/src/components/Desktop/Desktop.tsx +++ b/src/components/Desktop/Desktop.tsx @@ -1 +1,72 @@ -export default function Desktop() { return
Desktop
; } +import { useState, useCallback } from 'react'; +import MenuBar from '../MenuBar/MenuBar'; +import Dock from '../Dock/Dock'; +import DesktopIcon from '../DesktopIcon/DesktopIcon'; +import Window from '../Window/Window'; +import ContextMenu from '../ContextMenu/ContextMenu'; +import { useOS } from '../../context/WindowContext'; +import { APPS, WALLPAPERS } from '../../config/apps'; +import './Desktop.css'; + +interface CtxMenu { x: number; y: number } + +export default function Desktop() { + const { state, openWindow, setWallpaper } = useOS(); + const [ctxMenu, setCtxMenu] = useState(null); + + const handleContextMenu = useCallback((e: React.MouseEvent) => { + e.preventDefault(); + setCtxMenu({ x: e.clientX, y: e.clientY }); + }, []); + + const handleChangeWallpaper = useCallback(() => { + const next = (state.wallpaper + 1) % WALLPAPERS.length; + setWallpaper(next); + }, [state.wallpaper, setWallpaper]); + + const handleAboutThisMac = useCallback(() => { + openWindow('about'); + }, [openWindow]); + + return ( +
setCtxMenu(null)} + > + + +
+ {APPS.map(app => ( +
+ openWindow(app.id)} /> +
+ ))} +
+ + {APPS.map(app => ( + + ))} + + + + {ctxMenu && ( + setCtxMenu(null)} + onChangeWallpaper={handleChangeWallpaper} + onAboutThisMac={handleAboutThisMac} + /> + )} +
+ ); +}