✨ feat: initial app

2026-09-02 14:18:35 +00:00 · 2026-05-10 03:06:54 +07:00
parent 23be44dbe0
commit d5b92cc9a4
95 changed files with 8104 additions and 0 deletions
@@ -0,0 +1,43 @@
+"use client";
+
+import React from "react";
+import { useUiStore } from "../store/ui-store";
+import { cx, subtleButtonClass } from "../lib/theme";
+import { useTranslations } from "../hooks/use-translations";
+
+export function UiPreferences({ compact = false }: { compact?: boolean }) {
+  const { theme, locale, setTheme, setLocale } = useUiStore((s) => s);
+  const { t } = useTranslations();
+  const isDark = theme === "dark";
+  const wrapperHeight = compact ? "h-7" : "h-9";
+  const textSize = compact ? "text-[10px]" : "text-xs";
+
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <label className={cx("inline-flex items-center rounded border px-2", subtleButtonClass(isDark), wrapperHeight)}>
+        <span className={cx("mr-2 font-semibold opacity-70", textSize)}>{t("ui.locale")}</span>
+        <select
+          aria-label={t("ui.locale")}
+          value={locale}
+          onChange={(event) => setLocale(event.target.value as "en" | "th" | "ja")}
+          className={cx(
+            "bg-transparent font-semibold outline-none",
+            textSize,
+            isDark ? "text-[#f5f7fa]" : "text-[#1f2430]",
+          )}
+        >
+          <option value="en">English</option>
+          <option value="th">Thai</option>
+          <option value="ja">Japanese</option>
+        </select>
+      </label>
+      <button
+        type="button"
+        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+        className={cx("rounded border px-3 font-semibold", subtleButtonClass(isDark), wrapperHeight, textSize)}
+      >
+        {theme === "dark" ? t("ui.darkMode") : t("ui.lightMode")}
+      </button>
+    </div>
+  );
+}