cards/clients/solid/src/App.tsx

52 lines
1.6 KiB
TypeScript
Raw Normal View History

2024-10-15 21:09:11 -04:00
import type { JSXElement } from "solid-js";
2024-10-15 22:19:39 -04:00
import { lazy } from "solid-js";
2024-10-15 21:09:11 -04:00
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";
2024-10-15 22:19:39 -04:00
const Browser = lazy(() => import("@/pages/Browser"));
const Game = lazy(() => import("@/pages/Game"));
2024-10-15 21:09:11 -04:00
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 />
<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>
</>
);
}