90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { APPS, APP_BY_ID } from "./apps";
|
|
import Clock from "./Clock";
|
|
import { useTheme } from "./useTheme";
|
|
import { WALLPAPER } from "../data";
|
|
|
|
const DOCK_IDS = ["projects", "services", "socials", "contributions"];
|
|
|
|
export default function AndroidHome() {
|
|
const { theme, toggle } = useTheme();
|
|
const [openId, setOpenId] = useState<string | null>(null);
|
|
const openApp = openId ? APP_BY_ID[openId] : null;
|
|
|
|
const renderIcon = (appId: string, inDock = false) => {
|
|
const app = APP_BY_ID[appId];
|
|
if (!app) return null;
|
|
return (
|
|
<button
|
|
key={app.id}
|
|
type="button"
|
|
className={"android-app" + (inDock ? " in-dock" : "")}
|
|
onClick={() => setOpenId(app.id)}
|
|
>
|
|
<span className="android-app-icon" style={{ background: app.color }}>
|
|
{app.icon}
|
|
</span>
|
|
{!inDock && <span className="android-app-label">{app.title}</span>}
|
|
</button>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="android-root">
|
|
{openApp ? (
|
|
<div className="android-app-view">
|
|
<header className="android-appbar">
|
|
<button
|
|
type="button"
|
|
className="android-back"
|
|
onClick={() => setOpenId(null)}
|
|
aria-label="Back"
|
|
>
|
|
←
|
|
</button>
|
|
<span className="android-appbar-title">{openApp.title}</span>
|
|
</header>
|
|
<div className="android-app-body app-surface">{openApp.content}</div>
|
|
</div>
|
|
) : (
|
|
<div className="android-home" style={{ backgroundImage: `url('${WALLPAPER}')` }}>
|
|
<div className="android-statusbar">
|
|
<span className="android-status-time">
|
|
<Clock />
|
|
</span>
|
|
<span className="android-status-icons" aria-hidden="true">
|
|
ᯤ ▮
|
|
</span>
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
className="android-theme-chip"
|
|
onClick={toggle}
|
|
aria-label={`Switch to ${theme === "skeuo" ? "gruvbox" : "Desktop"} theme`}
|
|
>
|
|
<span aria-hidden="true">🎨</span>
|
|
<span>{theme === "skeuo" ? "Gruvbox" : "Desktop"}</span>
|
|
</button>
|
|
|
|
<div className="android-glance">
|
|
<div className="android-glance-time">
|
|
<Clock />
|
|
</div>
|
|
<div className="android-glance-sub">dvorakmortonxd.dev</div>
|
|
</div>
|
|
|
|
<div className="android-grid">{APPS.map((app) => renderIcon(app.id))}</div>
|
|
|
|
<div className="android-dock">{DOCK_IDS.map((id) => renderIcon(id, true))}</div>
|
|
|
|
<div className="android-navbar">
|
|
<span className="android-navbar-pill" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|