33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
type BlogBlocksCategoryTabsProps = {
|
|
labels: string[];
|
|
};
|
|
|
|
export function BlogBlocksCategoryTabs({ labels }: BlogBlocksCategoryTabsProps) {
|
|
return (
|
|
<div
|
|
role="tablist"
|
|
aria-label="دستهبندی وبلاگ"
|
|
className="-ml-0.5 flex snap-x snap-mandatory overflow-x-auto py-3 max-md:px-6"
|
|
>
|
|
{labels.map((label, index) => (
|
|
<button
|
|
key={label}
|
|
role="tab"
|
|
aria-selected={index === 0}
|
|
className="group snap-center px-1 text-muted-foreground disabled:pointer-events-none disabled:opacity-50"
|
|
>
|
|
<span
|
|
className={
|
|
index === 0
|
|
? "flex w-fit items-center gap-2 rounded-md bg-card px-3 py-1.5 text-sm font-medium text-primary shadow-sm ring-1 shadow-black/6.5 ring-border transition-colors"
|
|
: "flex w-fit items-center gap-2 rounded-md px-3 py-1.5 text-sm tra *:nsition-colors group-hover:bg-foreground/5 hover:text-foreground"
|
|
}
|
|
>
|
|
<span className="capitalize">{label}</span>
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|