A tab list for switching between related panels of content, with full arrow-key/Home/End keyboard navigation and a pill or underline visual style.
"use client";
import { Tabs, type TabItem } from "@/components/ui/tabs";
import { useState } from "react";
type Filter = "all" | "incoming" | "outgoing" | "flagged";
function CountBadge({ count }: { count: number }) {
return (
<span className="ml-1 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-accent-ink/10 px-1 text-[11px] font-bold text-accent-ink">
{count}
</span>
);
}
const items: TabItem<Filter>[] = [
{
value: "all",
label: "All",
badge: <CountBadge count={27} />,
content: (
<p className="text-sm text-ink-soft">
Every transaction on this account.
</p>
),
},
{
value: "incoming",
label: "Incoming",
content: (
<p className="text-sm text-ink-soft">Deposits and transfers in.</p>
),
},
{
value: "outgoing",
label: "Outgoing",
content: (
<p className="text-sm text-ink-soft">Payments and transfers out.</p>
),
},
{
value: "flagged",
label: "Flagged",
content: (
<p className="text-sm text-ink-soft">Transactions that need review.</p>
),
},
];
export default function TabsDemo() {
const [value, setValue] = useState<Filter>("all");
return (
<div className="flex w-full max-w-sm flex-col gap-3 bg-canvas p-6 text-ink">
<Tabs
items={items}
value={value}
onValueChange={setValue}
label="Transactions"
variant="pill"
/>
</div>
);
}
