website refactor

apps/website/components/teams/TeamsDirectoryHeader.tsx

@@ -0,0 +1,52 @@
+'use client';
+
+import React from 'react';
+import { Plus } from 'lucide-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';
+
+interface TeamsDirectoryHeaderProps {
+  onCreateTeam: () => void;
+}
+
+export function TeamsDirectoryHeader({ onCreateTeam }: TeamsDirectoryHeaderProps) {
+  return (
+    <Stack 
+      direction="row" 
+      align="end" 
+      justify="between" 
+      wrap 
+      gap={4} 
+      borderBottom 
+      borderColor="outline-steel" 
+      pb={6}
+    >
+      <Box>
+        <Heading level={1} weight="bold">Teams</Heading>
+        <Text 
+          color="text-gray-500" 
+          size="sm" 
+          mt={1} 
+          font="mono" 
+          uppercase 
+          letterSpacing="widest"
+        >
+          Operational Units & Racing Collectives
+        </Text>
+      </Box>
+      <Box>
+        <Button 
+          variant="primary" 
+          onClick={onCreateTeam}
+          icon={<Icon icon={Plus} size={4} />}
+        >
+          Initialize Team
+        </Button>
+      </Box>
+    </Stack>
+  );
+}