website refactor

apps/website/components/teams/TeamsDirectoryHeader.tsx

@@ -1,42 +1,21 @@
 'use client';
-
+ 
 import { Button } from '@/ui/Button';
-import { Heading } from '@/ui/Heading';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/Stack';
-import { Text } from '@/ui/Text';
-import { Plus } from 'lucide-react';
-
+import { PageHeader } from '@/ui/PageHeader';
+import { Plus, Users } from 'lucide-react';
+ 
 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}
-    >
-      <Stack>
-        <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>
-      </Stack>
-      <Stack>
+    <PageHeader
+      icon={Users}
+      title="Teams"
+      description="Operational Units & Racing Collectives"
+      action={
         <Button 
           variant="primary" 
           onClick={onCreateTeam}
@@ -44,7 +23,7 @@ export function TeamsDirectoryHeader({ onCreateTeam }: TeamsDirectoryHeaderProps
         >
           Initialize Team
         </Button>
-      </Stack>
-    </Stack>
+      }
+    />
   );
 }