33 lines
939 B
TypeScript
33 lines
939 B
TypeScript
import { clsx } from "clsx";
|
|
import { ComponentPropsWithoutRef } from "react";
|
|
|
|
export function TabList({ className, ...props }: ComponentPropsWithoutRef<"div">) {
|
|
return (
|
|
<div
|
|
className={clsx("inline-flex gap-2 rounded-[var(--radius-lg)] bg-[color:var(--color-border)/0.12] p-1", className)}
|
|
role="tablist"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export interface TabProps extends ComponentPropsWithoutRef<"button"> {
|
|
isActive?: boolean;
|
|
}
|
|
|
|
export function Tab({ className, isActive, ...props }: TabProps) {
|
|
return (
|
|
<button
|
|
className={clsx(
|
|
"min-w-[120px] rounded-[var(--radius-md)] px-4 py-2 text-sm font-medium transition",
|
|
isActive
|
|
? "bg-[var(--color-foreground)] text-[var(--color-background)] shadow"
|
|
: "bg-transparent text-[var(--color-muted)] hover:text-[var(--color-foreground)]"
|
|
)}
|
|
aria-selected={isActive}
|
|
role="tab"
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|