website refactor

apps/website/components/sponsors/SponsorDashboardHeader.tsx

@@ -0,0 +1,100 @@
+'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>
+  );
+}