101 lines
3.0 KiB
TypeScript
101 lines
3.0 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Box } from '@/ui/Box';
|
|
import { Stack } from '@/ui/Stack';
|
|
import { Heading } from '@/ui/Heading';
|
|
import { Text } from '@/ui/Text';
|
|
import { Button } from '@/ui/Button';
|
|
import { Icon } from '@/ui/Icon';
|
|
import { Surface } from '@/ui/Surface';
|
|
import {
|
|
LayoutDashboard,
|
|
RefreshCw,
|
|
Settings,
|
|
Bell
|
|
} from 'lucide-react';
|
|
import { Link } from '@/ui/Link';
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
|
|
interface SponsorDashboardHeaderProps {
|
|
sponsorName: string;
|
|
onRefresh?: () => void;
|
|
}
|
|
|
|
/**
|
|
* SponsorDashboardHeader
|
|
*
|
|
* Semantic header for the sponsor dashboard.
|
|
* Orchestrates dashboard-level actions and identity.
|
|
*/
|
|
export function SponsorDashboardHeader({ sponsorName, onRefresh }: SponsorDashboardHeaderProps) {
|
|
return (
|
|
<Box mb={8}>
|
|
<Stack direction={{ base: 'col', md: 'row' }} align="start" justify="between" gap={4}>
|
|
<Stack direction="row" align="center" gap={4}>
|
|
<Surface
|
|
variant="muted"
|
|
rounded="lg"
|
|
padding={3}
|
|
bg="bg-primary-blue/10"
|
|
border
|
|
borderColor="border-primary-blue/20"
|
|
>
|
|
<Icon icon={LayoutDashboard} size={6} color="text-primary-blue" />
|
|
</Surface>
|
|
<Box>
|
|
<Heading level={1} fontSize="2xl" weight="bold" color="text-white">
|
|
Sponsor Dashboard
|
|
</Heading>
|
|
<Text color="text-gray-400" size="sm">
|
|
Welcome back, <Text color="text-white" weight="medium">{sponsorName}</Text>
|
|
</Text>
|
|
</Box>
|
|
</Stack>
|
|
|
|
<Stack direction="row" align="center" gap={3}>
|
|
<Surface variant="muted" rounded="lg" padding={1} bg="bg-iron-gray/10" border borderColor="border-charcoal-outline/30">
|
|
<Stack direction="row" align="center">
|
|
{(['7d', '30d', '90d'] as const).map((range) => (
|
|
<Button
|
|
key={range}
|
|
variant="ghost"
|
|
size="sm"
|
|
px={3}
|
|
>
|
|
{range}
|
|
</Button>
|
|
))}
|
|
</Stack>
|
|
</Surface>
|
|
|
|
<Button variant="secondary" size="sm" onClick={onRefresh} icon={<Icon icon={RefreshCw} size={4} />}>
|
|
Refresh
|
|
</Button>
|
|
|
|
<Link href={routes.sponsor.settings}>
|
|
<Button variant="secondary" size="sm" icon={<Icon icon={Settings} size={4} />}>
|
|
Settings
|
|
</Button>
|
|
</Link>
|
|
|
|
<Button variant="secondary" size="sm" position="relative">
|
|
<Icon icon={Bell} size={4} />
|
|
<Box
|
|
position="absolute"
|
|
top={-1}
|
|
right={-1}
|
|
w={2}
|
|
h={2}
|
|
rounded="full"
|
|
bg="bg-racing-red"
|
|
border
|
|
borderColor="border-deep-graphite"
|
|
/>
|
|
</Button>
|
|
</Stack>
|
|
</Stack>
|
|
</Box>
|
|
);
|
|
}
|