cards/clients/solid/src/App.tsx

53 lines
1.7 KiB
TypeScript

import type { JSXElement } from "solid-js";
import { lazy } from "solid-js";
import { ColorModeProvider, ColorModeScript } from "@kobalte/core";
import {
Tabs,
TabsContent,
TabsIndicator,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
import Home from "@/pages/Home";
import Footer from "@/components/Footer";
import { Websocket } from "./components/Websocket";
const Browser = lazy(() => import("@/pages/Browser"));
const Game = lazy(() => import("@/pages/Game"));
export default function App(): JSXElement {
return (
<>
<ColorModeScript />
<ColorModeProvider>
<div class="lg:container m-auto relative">
<div class="transition-all p-1 lg:p-5 lg:rounded-2xl lg:shadow-xl min-h-screen lg:min-h-0 dark:bg-black">
<h1 class="text-4xl sm:text-6xl md:text-7xl lg:text-8xl tracking-tighter">
Cards For Humanity
</h1>
<br />
<Websocket />
<Tabs defaultValue="home">
<TabsList>
<TabsTrigger value="home">Home</TabsTrigger>
<TabsTrigger value="browser">Browser</TabsTrigger>
<TabsTrigger value="game">Game</TabsTrigger>
<TabsIndicator variant="underline" />
</TabsList>
<TabsContent value="home">
<Home />
</TabsContent>
<TabsContent value="browser">
<Browser />
</TabsContent>
<TabsContent value="game">
<Game />
</TabsContent>
</Tabs>
<Footer />
</div>
</div>
</ColorModeProvider>
</>
);
}