feat: add design system

src/routes/__root.tsx

@@ -1,20 +1,18 @@
-import { createRootRoute, Link, Outlet } from "@tanstack/react-router";
+import { createRootRoute, Outlet, useNavigate } from "@tanstack/react-router";
 import { TanStackDevtools } from "@tanstack/react-devtools";
 import { ReactQueryDevtoolsPanel } from "@tanstack/react-query-devtools";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
+import { useEffect } from "react";
+
+import { Route as GameRoute } from "./game";
 
 export const Route = createRootRoute({
+  notFoundComponent: () => {
+    const navigate = useNavigate();
+    useEffect(() => void navigate({ to: GameRoute.to }), [navigate]);
+  },
   component: () => (
     <>
-      <div className="p-2 flex gap-2">
-        <Link to="/" className="[&.active]:font-bold">
-          Home
-        </Link>{" "}
-        <Link to="/about" className="[&.active]:font-bold">
-          About
-        </Link>
-      </div>
-      <hr />
       <Outlet />
       <TanStackDevtools
         config={{

src/routes/about.tsx

@@ -1,5 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-
-export const Route = createFileRoute("/about")({
-  component: () => <div className="p-2">Hello from About!</div>,
-});

src/routes/apiary/-/ApiaryRoute.tsx

@@ -0,0 +1,5 @@
+import SectionSurface from "@components/surface/SectionSurface";
+
+export default function ApiaryRoute() {
+  return <SectionSurface>Hello "/apiary"!</SectionSurface>;
+}

src/routes/apiary/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from "@tanstack/react-router";
+import component from "./-/ApiaryRoute";
+export const Route = createFileRoute("/apiary/")({ component });

src/routes/cashdesk/-/CashdeskRoute.tsx

@@ -0,0 +1,5 @@
+import SectionSurface from "@components/surface/SectionSurface";
+
+export default function CashdeskRoute() {
+  return <SectionSurface>Hello "/cashdesk"!</SectionSurface>;
+}

src/routes/cashdesk/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from "@tanstack/react-router";
+import component from "./-/CashdeskRoute";
+export const Route = createFileRoute("/cashdesk/")({ component });

src/routes/earnings/-/EarningsRoute.tsx

@@ -0,0 +1,5 @@
+import SectionSurface from "@components/surface/SectionSurface";
+
+export default function EarningsRoute() {
+  return <SectionSurface>Hello "/earnings"!</SectionSurface>;
+}

src/routes/earnings/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from "@tanstack/react-router";
+import component from "./-/EarningsRoute";
+export const Route = createFileRoute("/earnings/")({ component });

src/routes/game/-/GameRoute.tsx

@@ -0,0 +1,94 @@
+import { useState } from "react";
+
+import SectionSurface from "@components/surface/SectionSurface";
+import { Link } from "@tanstack/react-router";
+import DarkSurface from "@components/surface/DarkSurface";
+import ContentSurface from "@components/surface/ContentSurface";
+import LightSurface from "@components/surface/LightSurface";
+import DataSurface from "@components/surface/DataSurface";
+import GlassSurface, { GlassSurfaceContent } from "@components/surface/GlassSurface";
+import Button from "@components/atoms/Button";
+import TabSelector from "@components/atoms/TabSelector";
+import Progress from "@components/atoms/Progress";
+import RangeInput from "@components/form/RangeInput";
+import SwitchInput from "@components/form/SwitchInput";
+import TextInput from "@components/form/TextInput";
+import NumberInput from "@components/form/NumberInput";
+import TextAreaInput from "@components/form/TextAreaInput";
+import ActionModal from "@components/modal/ActionModal";
+
+const TABS = [
+  { key: "tab1", title: "Tab 1" },
+  { key: "tab2", title: "Tab 2" },
+  { key: "tab3", title: "Tab 3" },
+];
+
+export default function GameRoute() {
+  const [activeTab, setActiveTab] = useState<string | null>(TABS[0].key);
+  const [progressValue, setProgressValue] = useState(0);
+  const [switchValue, setSwitchValue] = useState<boolean | null>(false);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  return (
+    <SectionSurface className="relative flex flex-col gap-4 w-full overflow-auto max-h-dvh">
+      <TabSelector tabs={TABS} value={activeTab} onChange={setActiveTab} />
+      <SwitchInput value={switchValue} onChange={setSwitchValue} />
+      <ContentSurface className="rounded-2xl">
+        <LightSurface className="rounded-2xl rounded-b-sm p-2">
+          Hello "/game"!
+          <DataSurface>100$</DataSurface>
+        </LightSurface>
+        <DarkSurface className="rounded-2xl rounded-t-sm p-2 flex flex-col gap-2">
+          <Link to="/roulette">Roulette</Link>
+          <DataSurface>100$</DataSurface>
+        </DarkSurface>
+      </ContentSurface>
+      <Button onClick={() => setModalOpen(true)}>Open modal</Button>
+      <Button>Click me</Button>
+      <Button variant="green">Click me</Button>
+      <Button variant="red">Click me</Button>
+      <Button variant="yellow">Click me</Button>
+      <Button variant="blue">Click me</Button>
+      <ContentSurface className="rounded-full">
+        <Progress value={progressValue} max={10000} variant="green" />
+      </ContentSurface>
+      <ContentSurface className="rounded-full">
+        <Progress value={progressValue} max={10000} variant="yellow" />
+      </ContentSurface>
+      <RangeInput
+        value={progressValue}
+        onChange={(e) => setProgressValue(Number(e.target.value))}
+        min={0}
+        max={10000}
+      />
+      <TextInput placeholder="Text Input" />
+      <TextInput placeholder="Text Input Error" error />
+      <NumberInput placeholder="Number Input" />
+      <NumberInput error prefix="$" value={progressValue} onChange={setProgressValue} />
+      <TextAreaInput placeholder="Text Area Input" rows={3} />
+      <TextAreaInput placeholder="Text Area Error" error rows={3} />
+      <div className="flex gap-2">
+        {[1, 2, 3, 4, 5].map((i) => (
+          <GlassSurface
+            key={i}
+            className="rounded-2xl w-12.5 h-12.5 p-3"
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ type: "spring" }}
+          >
+            <GlassSurfaceContent className="rounded-2xl flex items-center justify-center">
+              10
+            </GlassSurfaceContent>
+          </GlassSurface>
+        ))}
+      </div>
+      <ActionModal
+        open={modalOpen}
+        description="Are you sure you want to proceed with this action?"
+        onClose={() => setModalOpen(false)}
+        onConfirm={() => setModalOpen(false)}
+        confirmText="Confirm"
+      />
+    </SectionSurface>
+  );
+}

src/routes/game/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from "@tanstack/react-router";
+import component from "./-/GameRoute";
+export const Route = createFileRoute("/game/")({ component });

src/routes/index.tsx

@@ -1,26 +0,0 @@
-import { createFileRoute } from "@tanstack/react-router";
-import { useTranslation } from "react-i18next";
-import { useEffect, useState } from "react";
-import { languages } from "../i18next";
-
-export const Route = createFileRoute("/")({
-  component: () => {
-    const { t, i18n } = useTranslation();
-
-    const [langIdx, setLangIdx] = useState(0);
-    useEffect(() => {
-      i18n.changeLanguage(languages[langIdx].key);
-    }, [langIdx, i18n]);
-
-    return (
-      <div className="p-2">
-        <h3>
-          {t("hello")}
-          <button onClick={() => setLangIdx((langIdx + 1) % languages.length)}>
-            {i18n.language}
-          </button>
-        </h3>
-      </div>
-    );
-  },
-});

src/routes/roulette/-/RouletteRoute.tsx

@@ -0,0 +1,11 @@
+import SectionSurface from "@components/surface/SectionSurface";
+import { Link } from "@tanstack/react-router";
+
+export default function RouletteRoute() {
+  return (
+    <SectionSurface>
+      Hello "/roulette"!
+      <Link to="/game">Game</Link>
+    </SectionSurface>
+  );
+}

src/routes/roulette/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from "@tanstack/react-router";
+import component from "./-/RouletteRoute";
+export const Route = createFileRoute("/roulette/")({ component });

src/routes/shop/-/ShopRoute.tsx

@@ -0,0 +1,5 @@
+import SectionSurface from "@components/surface/SectionSurface";
+
+export default function ShopRoute() {
+  return <SectionSurface>Shop</SectionSurface>;
+}

src/routes/shop/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from "@tanstack/react-router";
+import component from "./-/ShopRoute";
+export const Route = createFileRoute("/shop/")({ component });

src/routes/tasks/-/TasksRoute.tsx

@@ -0,0 +1,5 @@
+import SectionSurface from "@components/surface/SectionSurface";
+
+export default function TasksRoute() {
+  return <SectionSurface>Hello "/tasks"!</SectionSurface>;
+}

src/routes/tasks/index.tsx

@@ -0,0 +1,3 @@
+import { createFileRoute } from "@tanstack/react-router";
+import component from "./-/TasksRoute";
+export const Route = createFileRoute("/tasks/")({ component });