41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
'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>
|
|
);
|
|
}
|