"use client"; import type React from "react"; import { Tabs, TabsContent, TabsList, TabsTrigger, } from "@/components/registry/primitives/core/tabs"; import { cn } from "@/lib/registry/cn"; export interface ItemTabDefinition { id: string; label: React.ReactNode; items: TItem[]; renderItem?: ( item: TItem, index: number, tab: ItemTabDefinition, ) => React.ReactNode; getItemKey?: ( item: TItem, index: number, tab: ItemTabDefinition, ) => string; itemClassName?: string; empty?: React.ReactNode; } export interface ItemTabsProps { tabs: Array>; defaultTabId?: string; renderItem?: ( item: TItem, index: number, tab: ItemTabDefinition, ) => React.ReactNode; getItemKey?: ( item: TItem, index: number, tab: ItemTabDefinition, ) => string; empty?: React.ReactNode; className?: string; tabsListClassName?: string; tabsContentClassName?: string; itemsClassName?: string; triggerClassName?: string; listVariant?: "line" | "soft-rounded" | "segmented"; triggerVariant?: "line" | "soft-rounded" | "segmented"; tabsAriaLabel?: string; } export function ItemTabs({ tabs, defaultTabId, renderItem, getItemKey, empty, className, tabsListClassName, tabsContentClassName, itemsClassName, triggerClassName, listVariant = "line", triggerVariant = "line", tabsAriaLabel, }: ItemTabsProps) { if (!tabs.length) return null; const fallbackDefaultId = tabs.find((tab) => tab.items.length > 0)?.id; const resolvedDefaultId = defaultTabId ?? fallbackDefaultId ?? tabs[0]?.id; if (!resolvedDefaultId) return null; return ( {tabs.map((tab) => ( {tab.label} ))} {tabs.map((tab) => { const tabRenderItem = tab.renderItem ?? renderItem; const tabGetItemKey = tab.getItemKey ?? getItemKey; return ( {tab.items.length === 0 ? ( (tab.empty ?? empty ?? null) ) : tabRenderItem && tabGetItemKey ? (

{tab.items.map((item, index) => (

{tabRenderItem(item, index, tab)}

))}

) : null} ); })} ); }

Item Tabs

Showcase

Item Tabs