34 lines
802 B
TypeScript
34 lines
802 B
TypeScript
|
import { cn } from '@/lib/utils/cn';
|
||
|
|
|
||
|
|
interface Tab {
|
||
|
|
value: string;
|
||
|
|
label: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface MobileTabsProps {
|
||
|
|
tabs: Tab[];
|
||
|
|
active: string;
|
||
|
|
onChange: (value: string) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function MobileTabs({ tabs, active, onChange }: MobileTabsProps) {
|
||
|
|
return (
|
||
|
|
<div className="flex lg:hidden glass rounded-xl p-1 gap-1">
|
||
|
|
{tabs.map(({ value, label }) => (
|
||
|
|
<button
|
||
|
|
key={value}
|
||
|
|
onClick={() => onChange(value)}
|
||
|
|
className={cn(
|
||
|
|
'flex-1 py-2.5 rounded-lg text-sm font-medium transition-all',
|
||
|
|
active === value
|
||
|
|
? 'bg-primary text-primary-foreground shadow-sm'
|
||
|
|
: 'text-muted-foreground hover:text-foreground'
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|