37 lines
1.3 KiB
TypeScript
37 lines
1.3 KiB
TypeScript
import { createFileRoute } from '@tanstack/react-router'
|
|
import { Title, Text, SimpleGrid, Card, Group, Stack } from '@pikku/mantine/core'
|
|
import { m } from '@/i18n/messages'
|
|
import { useLocale } from '@/i18n/config'
|
|
import type { I18nNode } from '@pikku/react'
|
|
import { BedDouble, CheckSquare, Sailboat, CalendarDays } from 'lucide-react'
|
|
|
|
export const Route = createFileRoute('/_authenticated/')({
|
|
component: DashboardPage,
|
|
})
|
|
|
|
function DashboardPage() {
|
|
useLocale()
|
|
return (
|
|
<Stack gap="lg">
|
|
<Title order={2}>{m.dashboard_title()}</Title>
|
|
<SimpleGrid cols={{ base: 1, sm: 2, lg: 4 }}>
|
|
<SummaryCard icon={BedDouble} label={m.dashboard_stays()} color="teal" />
|
|
<SummaryCard icon={CheckSquare} label={m.dashboard_tasks()} color="blue" />
|
|
<SummaryCard icon={Sailboat} label={m.dashboard_boats()} color="cyan" />
|
|
<SummaryCard icon={CalendarDays} label={m.dashboard_retreats()} color="grape" />
|
|
</SimpleGrid>
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
function SummaryCard({ icon: Icon, label, color }: { icon: React.ComponentType<any>; label: I18nNode; color: string }) {
|
|
return (
|
|
<Card withBorder radius="md" p="md">
|
|
<Group>
|
|
<Icon size={24} color={`var(--mantine-color-${color}-6)`} />
|
|
<Text fw={600}>{label}</Text>
|
|
</Group>
|
|
</Card>
|
|
)
|
|
}
|