3 files changed, 61 insertions, 0 deletions
diff --git a/src/taskbar/index.tsx b/src/taskbar/index.tsx
new file mode 100644
index 0000000..34377c2
--- /dev/null
+++ b/src/taskbar/index.tsx
@@ -0,0 +1,27 @@
+import { StartButton } from "./start"
+import { Time } from "./time"
+
+export function Taskbar() {
+    return <nav>
+        <StartButton />
+        <ul>
+            <li>
+                <button>
+                    README.txt
+                </button>
+            </li>
+            <li>
+                <button>
+                KEYGEn
+                </button>
+            </li>
+            <li>
+                <button>
+                Chat
+                </button>
+            </li>
+        </ul>
+        <Time />
+        <div id="netpunk_descender"></div>
+    </nav>
+}
diff --git a/src/taskbar/start.tsx b/src/taskbar/start.tsx
new file mode 100644
index 0000000..ddf6d47
--- /dev/null
+++ b/src/taskbar/start.tsx
@@ -0,0 +1,11 @@
+export function StartButton() {
+    return <div id="start">
+        <button>
+            <img src="/assets/fumo.png" />
+            Start
+        </button>
+        <div>
+            <div></div>
+        </div>
+    </div>
+}
diff --git a/src/taskbar/time.tsx b/src/taskbar/time.tsx
new file mode 100644
index 0000000..053147b
--- /dev/null
+++ b/src/taskbar/time.tsx
@@ -0,0 +1,23 @@
+import { useEffect, useState } from "preact/hooks";
+
+const dateTimeFormat = new Intl.DateTimeFormat();
+const timezoneId = Temporal.Now.timeZoneId();
+
+export function Time() {
+    const [time, setTime] = useState(Temporal.Now.instant().toZonedDateTimeISO(timezoneId))
+
+    useEffect(() => {
+        const id = setInterval(() => {
+            setTime(time => time.add({ seconds: 1 }));
+        }, 1000)
+
+        return () => {
+            clearInterval(id);
+        }
+    }, [])
+
+    return <div id="time">
+        <div>{dateTimeFormat.format(time.toPlainTime())}</div>
+        <div>{dateTimeFormat.format(time.toPlainDate())}</div>
+    </div>
+}