Merge pull request #15 from OmgRod/copilot/fix-tabpanels-component-issue

Refactor TabPanels to compound Tab children pattern

Author: OmgRod

components/Tabs.js

@@ -1,8 +1,14 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 
-export function TabPanels({ tabs = [] }) {
-  const [active, setActive] = useState(tabs[0]?.id);
-  const activeTab = tabs.find((tab) => tab.id === active) || tabs[0];
+export function Tab({ children }) {
+  return children;
+}
+
+export function TabPanels({ children }) {
+  const tabs = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.props.title != null,
+  );
+  const [activeIndex, setActiveIndex] = useState(0);
 
   if (!tabs.length) {
     return null;
@@ -11,22 +17,24 @@ export function TabPanels({ tabs = [] }) {
   return (
     <div className="my-6 overflow-hidden rounded-xl border border-slate-200 bg-white shadow-sm dark:border-slate-800 dark:bg-slate-900">
       <div className="flex flex-wrap gap-1 border-b border-slate-200 p-2 dark:border-slate-800">
-        {tabs.map((tab) => (
+        {tabs.map((tab, index) => (
           <button
-            key={tab.id}
+            key={tab.props.title}
             type="button"
-            onClick={() => setActive(tab.id)}
+            onClick={() => setActiveIndex(index)}
             className={`rounded-md px-3 py-1.5 text-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 ${
-              tab.id === active
+              index === activeIndex
                 ? 'bg-blue-600 text-white'
                 : 'text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-slate-800'
             }`}
           >
-            {tab.label}
+            {tab.props.title}
           </button>
         ))}
       </div>
-      <div className="p-4 text-sm leading-6 text-slate-700 dark:text-slate-200">{activeTab?.content}</div>
+      <div className="p-4 text-sm leading-6 text-slate-700 dark:text-slate-200">
+        {tabs[activeIndex]?.props.children}
+      </div>
     </div>
   );
 }

components/mdx-components.js

@@ -20,7 +20,7 @@ import PresetSearch from './PresetSearch';
 import SearchBar from './SearchBar';
 import Sidebar from './Sidebar';
 import Steps from './Steps';
-import Tabs, { TabPanels } from './Tabs';
+import Tabs, { Tab, TabPanels } from './Tabs';
 import Table, { Caption, TBody, TD, TH, THead, TR } from './WikiTable';
 
 const mdxComponents = {
@@ -54,6 +54,7 @@ const mdxComponents = {
   THead,
   TR,
   Tabs,
+  Tab,
   TabPanels,
   caption: (props) => <Caption {...props} />,
   pre: (props) => <CodeBlock {...props} />,

content/guides/components/tabs.mdx

@@ -5,38 +5,43 @@ description: Tabbed content UI for grouped alternatives.
 
 # Tabs
 
-`Tabs` exports `TabPanels` for rendering tab groups.
+`TabPanels` renders a tab group. Each `Tab` child represents one tab, with its `title` displayed as the tab button label. Tab content can be any HTML or Markdown.
 
-## Props (`TabPanels`)
+## Props
+
+### `TabPanels`
 
 | Prop | Type | Required | Description |
 | --- | --- | --- | --- |
-| `tabs` | `Array<{ id: string, label: string, content: ReactNode }>` | Yes | Tab definitions. |
+| `children` | `Tab` elements | Yes | One or more `Tab` components. |
+
+### `Tab`
+
+| Prop | Type | Required | Description |
+| --- | --- | --- | --- |
+| `title` | `string` | Yes | Label shown on the tab button. |
+| `children` | `ReactNode` | Yes | Content rendered when the tab is active. |
 
 ## Live examples
 
-<TabPanels
-  tabs={[
-    { id: 'js', label: 'JavaScript', content: 'npm run dev' },
-    { id: 'pnpm', label: 'pnpm', content: 'pnpm dev' },
-    { id: 'bun', label: 'bun', content: 'bun run dev' },
-  ]}
-/>
-
-<TabPanels
-  tabs={[
-    { id: 'docs', label: 'Docs', content: 'Markdown + MDX content pages.' },
-    { id: 'config', label: 'Config', content: 'JSON files for navigation and layout behavior.' },
-  ]}
-/>
+<TabPanels>
+  <Tab title="JavaScript">npm run dev</Tab>
+  <Tab title="pnpm">pnpm dev</Tab>
+  <Tab title="Bun">bun run dev</Tab>
+</TabPanels>
+
+<TabPanels>
+  <Tab title="Docs">Markdown + MDX content pages.</Tab>
+  <Tab title="Config">JSON files for navigation and layout behavior.</Tab>
+</TabPanels>
 
 ## Code
 
 ```mdx
-<TabPanels
-  tabs={[
-    { id: 'js', label: 'JavaScript', content: 'npm run dev' },
-    { id: 'pnpm', label: 'pnpm', content: 'pnpm dev' },
-  ]}
-/>
+<TabPanels>
+  <Tab title="JavaScript">npm run dev</Tab>
+  <Tab title="pnpm">pnpm dev</Tab>
+  <Tab title="Bun">bun run dev</Tab>
+</TabPanels>
 ```
+