Renders a dynamic tab panel by mounting a given React component or displaying a configurable empty state when no matching tab component is found. ## Key Components ### `TabContent` A client-side React component that conditionally renders a tab's content component or a fallback empty state UI. **Props (`TabContentProps`):** | Prop | Type | Default | Description | |------|------|---------|-------------| | `activeTab` | `string` | — | Name of the currently active tab (used in fallback message) | | `TabComponent` | `React.ComponentType \| null` | — | Component to render; `null` triggers the empty state | | `componentProps` | `any` | — | Props spread into `TabComponent` when rendered | | `className` | `string` | — | Additional CSS classes for the wrapper | | `emptyStateTitle` | `string` | `"Tab Not Found"` | Heading shown in the empty state | | `emptyStateDescription` | `string` | — | Custom message; defaults to `"The selected tab '...' could not be found."` | | `minHeight` | `string` | `"min-h-[400px]"` | Tailwind min-height applied to the wrapper and empty state container | ## Usage Example ```typescript import { TabContent } from './tab-content' import { OverviewPanel } from './panels/OverviewPanel' const TAB_MAP: Record> = { overview: OverviewPanel, } function MyTabs({ activeTab }: { activeTab: string }) { const TabComponent = TAB_MAP[activeTab] ?? null return ( ) } ``` ## Notes - Marked `'use client'` — requires a Next.js App Router client boundary. - Uses [`cn`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/utils/cn.ts) for conditional Tailwind class merging. - The empty state is centered both vertically and horizontally within the min-height container.