56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Surface } from './Surface';
|
|
|
|
export interface TabNavigationOption {
|
|
id: string;
|
|
label: string;
|
|
icon?: React.ReactNode;
|
|
}
|
|
|
|
export interface TabNavigationProps {
|
|
options?: TabNavigationOption[];
|
|
activeId?: string;
|
|
onChange?: (id: string) => void;
|
|
tabs?: TabNavigationOption[];
|
|
activeTab?: string;
|
|
onTabChange?: (id: string) => void;
|
|
}
|
|
|
|
export const TabNavigation = ({
|
|
options,
|
|
activeId,
|
|
onChange,
|
|
tabs,
|
|
activeTab,
|
|
onTabChange
|
|
}: TabNavigationProps) => {
|
|
const finalOptions = options || tabs || [];
|
|
const finalActiveId = activeId || activeTab || '';
|
|
const finalOnChange = onChange || onTabChange || (() => {});
|
|
|
|
return (
|
|
<Surface variant="muted" rounded="xl" padding={1} display="inline-flex">
|
|
{finalOptions.map((option) => {
|
|
const isActive = option.id === finalActiveId;
|
|
return (
|
|
<button
|
|
key={option.id}
|
|
onClick={() => finalOnChange(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>
|
|
);
|
|
};
|