website refactor

apps/website/components/profile/ProfileTabs.tsx

@@ -1,10 +1,9 @@
+'use client';
 
-
-import { Button } from '@/ui/Button';
+import { SegmentedControl } from '@/ui/SegmentedControl';
 import { Icon } from '@/ui/Icon';
-import { Box } from '@/ui/primitives/Box';
-import { Surface } from '@/ui/primitives/Surface';
 import { BarChart3, TrendingUp, User } from 'lucide-react';
+import React from 'react';
 
 export type ProfileTab = 'overview' | 'stats' | 'ratings';
 
@@ -14,34 +13,17 @@ interface ProfileTabsProps {
 }
 
 export function ProfileTabs({ activeTab, onTabChange }: ProfileTabsProps) {
+  const options = [
+    { id: 'overview', label: 'Overview', icon: <Icon icon={User} size={4} /> },
+    { id: 'stats', label: 'Detailed Stats', icon: <Icon icon={BarChart3} size={4} /> },
+    { id: 'ratings', label: 'Ratings', icon: <Icon icon={TrendingUp} size={4} /> },
+  ];
+
   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>
-        <Button
-          variant={activeTab === 'ratings' ? 'primary' : 'ghost'}
-          onClick={() => onTabChange('ratings')}
-          size="sm"
-          icon={<Icon icon={TrendingUp} size={4} />}
-        >
-          Ratings
-        </Button>
-      </Box>
-    </Surface>
+    <SegmentedControl
+      options={options}
+      activeId={activeTab}
+      onChange={(id) => onTabChange(id as ProfileTab)}
+    />
   );
 }