44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import { FilterTabsProps } from "@/types/types";
|
|
|
|
export default function FilterTabs({
|
|
options = [],
|
|
activeFilter,
|
|
onChange,
|
|
className = "",
|
|
}: FilterTabsProps) {
|
|
if (!Array.isArray(options) || options.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<div className={`flex items-center gap-2.5 overflow-x-auto no-scrollbar py-1 ${className}`}>
|
|
{options.map((filter) => {
|
|
const isActive = activeFilter === filter.label;
|
|
|
|
return (
|
|
<button
|
|
key={filter.label}
|
|
type="button"
|
|
onClick={() => onChange(filter.label)}
|
|
className={`flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-medium transition-all whitespace-nowrap cursor-pointer ${
|
|
isActive
|
|
? "bg-teal-950/40 text-teal-400 border border-teal-500/50"
|
|
: "bg-[#0b1727] text-slate-400 border border-slate-800/80 hover:text-slate-200"
|
|
}`}
|
|
>
|
|
<span>{filter.label}</span>
|
|
{filter.count !== undefined && (
|
|
<span
|
|
className={`font-mono text-[11px] ${
|
|
isActive ? "text-teal-400 font-bold" : "text-slate-400"
|
|
}`}
|
|
>
|
|
{filter.count}
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
} |