40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
import type { ComponentType } from 'react';
|
|
|
|
interface SubTab<T extends string> {
|
|
id: T;
|
|
label: string;
|
|
icon: ComponentType<{ size?: number; className?: string }>;
|
|
}
|
|
|
|
interface Props<T extends string> {
|
|
tabs: readonly SubTab<T>[];
|
|
active: T;
|
|
onChange: (id: T) => void;
|
|
}
|
|
|
|
export default function SubTabs<T extends string>({ tabs, active, onChange }: Props<T>) {
|
|
return (
|
|
<div className="sticky top-0 z-30 -mx-3 md:-mx-6 px-3 md:px-6 -mt-3 md:-mt-6 pt-3 md:pt-6 pb-4 bg-[#F8F9FB] shadow-[0_8px_12px_-12px_rgba(15,23,42,0.08)]">
|
|
<div className="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
|
|
<div className="p-1 flex gap-1">
|
|
{tabs.map(({ id, label, icon: Icon }) => {
|
|
const isActive = active === id;
|
|
return (
|
|
<button
|
|
key={id}
|
|
onClick={() => onChange(id)}
|
|
className={`flex-1 flex items-center justify-center gap-1.5 rounded-xl py-1.5 text-[12px] font-bold transition-all ${
|
|
isActive ? 'bg-blue-50 text-blue-600' : 'text-slate-400 hover:bg-slate-50'
|
|
}`}
|
|
>
|
|
<Icon size={14} />
|
|
<span>{label}</span>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|