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 Section = "details" | "timeline" | "receipt";
const items: TabItem<Section>[] = [
{
value: "details",
label: "Details",
content: (
<p className="text-sm text-ink-soft">Recipient, amount and reference.</p>
),
},
{
value: "timeline",
label: "Timeline",
content: (
<p className="text-sm text-ink-soft">
Submitted, cleared and settled dates.
</p>
),
},
{
value: "receipt",
label: "Receipt",
content: (
<p className="text-sm text-ink-soft">
Download a PDF copy for your records.
</p>
),
},
];
export default function UnderlineCardTabsDemo() {
const [value, setValue] = useState<Section>("details");
return (
<div className="flex w-full max-w-sm flex-col gap-3 bg-canvas p-6 text-ink">
<div className="rounded-[var(--radius-card)] border border-line bg-surface p-4 shadow-[var(--shadow-tile)]">
<Tabs
items={items}
value={value}
onValueChange={setValue}
label="Transaction detail"
variant="underline"
/>
</div>
</div>
);
}
