website refactor

apps/website/components/drivers/SkillLevelButton.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+import { Button } from '@/ui/Button';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { Icon } from '@/ui/Icon';
+
+interface SkillLevelButtonProps {
+  label: string;
+  icon: LucideIcon;
+  color: string;
+  bgColor: string;
+  borderColor: string;
+  count: number;
+  onClick: () => void;
+}
+
+export function SkillLevelButton({
+  label,
+  icon,
+  color,
+  bgColor,
+  borderColor,
+  count,
+  onClick,
+}: SkillLevelButtonProps) {
+  return (
+    <Button
+      variant="ghost"
+      onClick={onClick}
+      fullWidth
+      className={`${bgColor} border ${borderColor} flex items-center justify-between p-3 rounded-lg h-auto`}
+    >
+      <Stack direction="row" align="center" gap={2}>
+        <Icon icon={icon} size={4} className={color} />
+        <Text weight="medium" color="text-white">{label}</Text>
+      </Stack>
+      <Text size="sm" color="text-gray-400">{count} teams</Text>
+    </Button>
+  );
+}