86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Text } from '@/ui/Text';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Surface } from '@/ui/Surface';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Trophy, Users, Timer, Activity, type LucideIcon } from 'lucide-react';
|
|
import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
|
|
|
|
interface LeagueHeaderPanelProps {
|
|
viewData: LeagueDetailViewData;
|
|
}
|
|
|
|
export function LeagueHeaderPanel({ viewData }: LeagueHeaderPanelProps) {
|
|
return (
|
|
<Surface variant="dark" border rounded="lg" padding={6} position="relative" overflow="hidden">
|
|
{/* Background Accent */}
|
|
<Box
|
|
position="absolute"
|
|
top={0}
|
|
right={0}
|
|
w="300px"
|
|
h="100%"
|
|
bg="bg-gradient-to-l from-primary-blue/5 to-transparent"
|
|
pointerEvents="none"
|
|
/>
|
|
|
|
<Stack direction={{ base: 'col', md: 'row' }} justify="between" align="center" gap={6}>
|
|
<Stack gap={2}>
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Box p={2} bg="bg-primary-blue/10" rounded="md" border borderColor="border-primary-blue/20">
|
|
<Icon icon={Trophy} size={6} color="text-primary-blue" />
|
|
</Box>
|
|
<Heading level={1} letterSpacing="tight">
|
|
{viewData.name}
|
|
</Heading>
|
|
</Stack>
|
|
<Text color="text-gray-400" size="sm" maxWidth="42rem">
|
|
{viewData.description}
|
|
</Text>
|
|
</Stack>
|
|
|
|
<Stack direction="row" gap={8} wrap>
|
|
<StatItem
|
|
icon={Users}
|
|
label="Members"
|
|
value={viewData.info.membersCount.toString()}
|
|
color="text-primary-blue"
|
|
/>
|
|
<StatItem
|
|
icon={Timer}
|
|
label="Races"
|
|
value={viewData.info.racesCount.toString()}
|
|
color="text-neon-aqua"
|
|
/>
|
|
<StatItem
|
|
icon={Activity}
|
|
label="Avg SOF"
|
|
value={(viewData.info.avgSOF ?? 0).toString()}
|
|
color="text-performance-green"
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
</Surface>
|
|
);
|
|
}
|
|
|
|
function StatItem({ icon, label, value, color }: { icon: LucideIcon, label: string, value: string, color: string }) {
|
|
return (
|
|
<Stack gap={1}>
|
|
<Stack direction="row" align="center" gap={1.5}>
|
|
<Icon icon={icon} size={3.5} color="text-gray-500" />
|
|
<Text size="xs" color="text-gray-500" weight="medium" letterSpacing="wider" display="block">
|
|
{label.toUpperCase()}
|
|
</Text>
|
|
</Stack>
|
|
<Text size="xl" weight="bold" color={color} lineHeight="none">
|
|
{value}
|
|
</Text>
|
|
</Stack>
|
|
);
|
|
}
|