feat: add design system

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>
+  );
+}