A headless React context provider that manages the active-tab state (controlled or uncontrolled) for building custom tab/tabpanel components, ported from the RockSolid Solid.js library.
"use client";
import * as React from "react";
import TabsContext, { useTabsContext } from "@/components/ui/tabs-context";
function DemoTab({
value,
children,
}: {
value: string;
children: React.ReactNode;
}) {
const { activeTabValue, handleChange, tabId } = useTabsContext("Tab");
const isSelected = activeTabValue() === value;
const id = tabId() ? `${tabId()}-tab-${value}` : undefined;
const ariaControls = tabId() ? `${tabId()}-tabpanel-${value}` : undefined;
return (
<button
id={id}
role="tab"
aria-selected={isSelected}
aria-controls={ariaControls}
tabIndex={isSelected ? 0 : -1}
onClick={(event) => handleChange(event as unknown as Event, value)}
className={
isSelected
? "px-4 py-2 text-sm font-medium border-b-2 border-foreground text-foreground"
: "px-4 py-2 text-sm font-medium border-b-2 border-transparent text-muted-foreground hover:text-foreground"
}
>
{children}
</button>
);
}
function DemoTabPanel({
value,
children,
}: {
value: string;
children: React.ReactNode;
}) {
const { activeTabValue, tabId } = useTabsContext("TabPanel");
const isActive = activeTabValue() === value;
const id = tabId() ? `${tabId()}-tabpanel-${value}` : undefined;
const ariaLabelledby = tabId() ? `${tabId()}-tab-${value}` : undefined;
return (
<div
id={id}
role="tabpanel"
aria-labelledby={ariaLabelledby}
hidden={!isActive}
className="p-4 text-sm text-muted-foreground"
>
{children}
</div>
);
}
export default function TabsContextDemo() {
return (
<div className="w-full max-w-md rounded-lg border border-border">
<TabsContext defaultValue="account" tabId="demo">
<div role="tablist" className="flex border-b border-border">
<DemoTab value="account">Account</DemoTab>
<DemoTab value="password">Password</DemoTab>
<DemoTab value="billing">Billing</DemoTab>
</div>
<DemoTabPanel value="account">
Manage your account details here.
</DemoTabPanel>
<DemoTabPanel value="password">Update your password here.</DemoTabPanel>
<DemoTabPanel value="billing">
Review your billing information here.
</DemoTabPanel>
</TabsContext>
</div>
);
}