79 lines
3.3 KiB
TypeScript
79 lines
3.3 KiB
TypeScript
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 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/modals/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">
|
|
<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} />
|
|
<ActionModal
|
|
open={modalOpen}
|
|
description="Are you sure you want to proceed with this action?"
|
|
onClose={() => setModalOpen(false)}
|
|
onConfirm={() => setModalOpen(false)}
|
|
confirmText="Confirm"
|
|
/>
|
|
</SectionSurface>
|
|
);
|
|
}
|