website refactor

apps/website/components/profile/ProfileTabs.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React from 'react';
+import { User, BarChart3 } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+type ProfileTab = 'overview' | 'stats';
+
+interface ProfileTabsProps {
+  activeTab: ProfileTab;
+  onTabChange: (tab: ProfileTab) => void;
+}
+
+export function ProfileTabs({ activeTab, onTabChange }: ProfileTabsProps) {
+  return (
+    <Surface variant="muted" rounded="xl" padding={1} style={{ backgroundColor: 'rgba(38, 38, 38, 0.5)', border: '1px solid #262626', width: 'fit-content' }}>
+      <Box style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+        <Button
+          variant={activeTab === 'overview' ? 'primary' : 'ghost'}
+          onClick={() => onTabChange('overview')}
+          size="sm"
+          icon={<Icon icon={User} size={4} />}
+        >
+          Overview
+        </Button>
+        <Button
+          variant={activeTab === 'stats' ? 'primary' : 'ghost'}
+          onClick={() => onTabChange('stats')}
+          size="sm"
+          icon={<Icon icon={BarChart3} size={4} />}
+        >
+          Detailed Stats
+        </Button>
+      </Box>
+    </Surface>
+  );
+}