refactor(ui): extract reusable component package

src/components/ThemeToggle.tsx

@@ -0,0 +1,36 @@
+import type { UiTheme } from "../theme";
+import { getNextUiTheme } from "../theme";
+import { IconGlyph } from "./IconGlyph";
+
+export interface ThemeToggleProps {
+  theme: UiTheme;
+  onThemeChange: (theme: UiTheme) => void;
+}
+
+export function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
+  const nextTheme = getNextUiTheme(theme);
+
+  return (
+    <button
+      aria-label="Light theme"
+      aria-pressed={theme === "light"}
+      className="theme-toggle"
+      data-ui-theme-current={theme}
+      data-ui-theme-toggle="true"
+      onClick={() => onThemeChange(nextTheme)}
+      type="button"
+    >
+      <span className="theme-toggle__label">Theme</span>
+      <span className="theme-toggle__switch" aria-hidden="true">
+        <span className="theme-toggle__cell" data-active={theme === "dark"}>
+          <IconGlyph name="mdi:weather-night" size="sm" />
+          <span>Dark</span>
+        </span>
+        <span className="theme-toggle__cell" data-active={theme === "light"}>
+          <IconGlyph name="mdi:white-balance-sunny" size="sm" />
+          <span>Light</span>
+        </span>
+      </span>
+    </button>
+  );
+}