47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
import { Surface } from './primitives/Surface';
|
|
|
|
export interface TabNavigationOption {
|
|
id: string;
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export interface TabNavigationProps {
|
|
options: TabNavigationOption[];
|
|
activeId: string;
|
|
onChange: (id: string) => void;
|
|
}
|
|
|
|
export const TabNavigation = ({
|
|
options,
|
|
activeId,
|
|
onChange
|
|
}: TabNavigationProps) => {
|
|
return (
|
|
<Surface variant="muted" rounded="xl" padding={1} display="inline-flex">
|
|
{options.map((option) => {
|
|
const isActive = option.id === activeId;
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
onClick={() => onChange(option.id)}
|
|
className={`px-4 py-2 text-xs font-bold uppercase tracking-widest transition-all rounded-lg ${
|
|
isActive
|
|
? 'bg-[var(--ui-color-bg-surface)] text-[var(--ui-color-intent-primary)] shadow-sm'
|
|
: 'text-[var(--ui-color-text-low)] hover:text-[var(--ui-color-text-high)]'
|
|
}`}
|
|
>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
{option.icon}
|
|
{option.label}
|
|
</Box>
|
|
</button>
|
|
);
|
|
})}
|
|
</Surface>
|
|
);
|
|
};
|