website refactor

apps/website/components/drivers/SkillLevelHeader.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { LucideIcon, ChevronRight, UserPlus } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Heading } from '@/ui/Heading';
+import { Icon } from '@/ui/Icon';
+import { Badge } from '@/ui/Badge';
+
+interface SkillLevelHeaderProps {
+  label: string;
+  icon: LucideIcon;
+  bgColor: string;
+  borderColor: string;
+  color: string;
+  description: string;
+  teamCount: number;
+  recruitingCount: number;
+  isExpanded: boolean;
+  onToggle: () => void;
+  showToggle: boolean;
+}
+
+export function SkillLevelHeader({
+  label,
+  icon,
+  bgColor,
+  borderColor,
+  color,
+  description,
+  teamCount,
+  recruitingCount,
+  isExpanded,
+  onToggle,
+  showToggle,
+}: SkillLevelHeaderProps) {
+  return (
+    <Box display="flex" alignItems="center" justifyContent="between" mb={4}>
+      <Stack direction="row" align="center" gap={3}>
+        <Box 
+          display="flex" 
+          center 
+          width="11" 
+          height="11" 
+          rounded="xl" 
+          className={`${bgColor} border ${borderColor}`}
+        >
+          <Icon icon={icon} size={5} className={color} />
+        </Box>
+        <Box>
+          <Stack direction="row" align="center" gap={2}>
+            <Heading level={2}>{label}</Heading>
+            <Badge variant="default">
+              {teamCount} {teamCount === 1 ? 'team' : 'teams'}
+            </Badge>
+            {recruitingCount > 0 && (
+              <Badge variant="success" icon={UserPlus}>
+                {recruitingCount} recruiting
+              </Badge>
+            )}
+          </Stack>
+          <Text size="sm" color="text-gray-500">{description}</Text>
+        </Box>
+      </Stack>
+
+      {showToggle && (
+        <Box
+          as="button"
+          type="button"
+          onClick={onToggle}
+          display="flex"
+          alignItems="center"
+          gap={1}
+          px={3}
+          py={1.5}
+          rounded="lg"
+          className="text-sm text-gray-400 hover:text-white hover:bg-iron-gray/50 transition-all"
+        >
+          <Text size="sm">{isExpanded ? 'Show less' : `View all ${teamCount}`}</Text>
+          <Icon icon={ChevronRight} size={4} className={`transition-transform ${isExpanded ? 'rotate-90' : ''}`} />
+        </Box>
+      )}
+    </Box>
+  );
+}