44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { CardTitle, Card, CardDescription, CardHeader, CardContent, CardFooter } from '@/components/ui/card';
|
|
import RouteCards from '@/components/RouteCards';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useRoutes } from '@/lib/clientActions';
|
|
|
|
|
|
export default function Home() {
|
|
|
|
const { data: routes, error, isLoading } = useRoutes();
|
|
let routesMap: Route[] = routes as Route[];
|
|
|
|
if (error) return <div>Error loading routes</div>
|
|
if (isLoading) return (
|
|
<div className='justify-center'>
|
|
Loading...
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<main>
|
|
<div className='flex items-center justify-center p-2'>
|
|
<Card className='flex'>
|
|
<CardHeader>
|
|
<CardTitle>Active Routes</CardTitle>
|
|
<CardDescription>Amount of configured routes</CardDescription>
|
|
</CardHeader>
|
|
<CardContent className='flex items-center'>
|
|
<div>
|
|
<p className='text-xl font-semibold translate-y-2'>{routesMap.length}</p>
|
|
</div>
|
|
</CardContent>
|
|
<CardFooter>
|
|
<Button className='translate-y-2.5'>Create</Button>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
<div className='grid grid-flow-row-dense md:grid-cols-6 sm:grid-cols-2 p-2'>
|
|
<RouteCards routes={routes as Route[]} />
|
|
</div>
|
|
</main>
|
|
)
|
|
}
|