A segmented tab list whose selection indicator physically slides and resizes to match the active tab, with a quieter hover ghost that previews where a click would land.
"use client";
import MagicTabs, { type MagicTabItem } from "@/components/ui/magic-tabs";
import { useState } from "react";
import { Activity, CreditCard, Gift, Archive } from "lucide-react";
const items: MagicTabItem[] = [
{ value: "activity", label: "Activity", icon: Activity, count: 24 },
{ value: "cards", label: "Cards", icon: CreditCard },
{ value: "rewards", label: "Rewards", icon: Gift, count: 3 },
{ value: "archive", label: "Archive", icon: Archive },
];
export default function MagicTabsDemo() {
const [value, setValue] = useState("activity");
return (
<div className="flex w-full flex-col items-center gap-4 bg-background p-10">
<MagicTabs
items={items}
value={value}
onValueChange={setValue}
label="Account sections"
variant="pill"
panelId="account-panel"
/>
<p className="text-sm text-muted-foreground">
Showing <span className="font-semibold text-foreground">{value}</span>.
</p>
</div>
);
}
