Add CodeTabs component for code usage examples in ComponentHero

Author: kotAPI

docs/app/docs/components/accordion/docs/example_1.tsx

@@ -1,3 +1,4 @@
+"use client"
 import Accordion from "@radui/ui/Accordion";
 
 let items = [

docs/components/docsHelpers/EditPageOnGithub.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { usePathname } from "next/navigation";
+import Link from "@radui/ui/Link";
 
 const EditPageOnGithub = () => {
 
@@ -11,8 +12,8 @@ const EditPageOnGithub = () => {
     const currentDocsPath = "docs/app/docs/" + page;
 
   return (
-    <div>
-      <a href={`https://github.com/rad-ui/rad-ui/edit/main/${currentDocsPath}/page.mdx`}>Edit this page on GitHub</a>
+    <div className="w-full max-w-screen-lg mx-auto mt-2">
+      <Link href={`https://github.com/rad-ui/rad-ui/edit/main/${currentDocsPath}/page.mdx`}>Edit this page on GitHub</Link>
     </div>
   );
 };

docs/components/layout/Documentation/Documentation.js

@@ -29,7 +29,7 @@ const Documentation = ({ title = '', description = '', currentPage = undefined,
         <div className='mt-4'>
             {children}
         </div>
-        <Separator />
+        <Separator className="my-10" />
     </div>;
 };
 

docs/components/layout/Documentation/helpers/ComponentHero/CodeTabs.js

@@ -0,0 +1,22 @@
+"use client"
+import { useState, useEffect } from 'react'
+import Tabs from "@radui/ui/Tabs"
+
+const CodeTabs = ({ data }) => {
+    const [activeTab, setActiveTab] = useState(data[0]?.value)
+   console.log(activeTab)
+
+    return  <Tabs.Root defaultValue={activeTab}>
+        <Tabs.List>
+            {data.map((tab, index) => (
+                <Tabs.Trigger key={index} value={tab.value}>{tab.label}</Tabs.Trigger>
+            ))}
+        </Tabs.List>
+        {data.map((tab, index) => (
+                <Tabs.Content key={index} value={tab.value}>{tab.content}</Tabs.Content>
+            ))}
+    </Tabs.Root>
+
+}
+
+export default CodeTabs

docs/components/layout/Documentation/helpers/ComponentHero/ComponentHero.js

@@ -1,42 +1,35 @@
 "use client"
 import CodeBlock from '../CodeBlock';
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useMemo } from 'react'
 import Tabs from "@radui/ui/Tabs"
 import Heading from "@radui/ui/Heading"
 import { BookMarkLink } from '@/components/layout/Documentation/utils';
 
+import CodeTabs from './CodeTabs';
 
-const TabContainer = ({ children }) => {
-    return <div className='px-2'>
-        {children}
-    </div>
-}
-
-const initializeTabs = (codeUsage) => {
-    const tabs = []
-    for (const key in codeUsage) {
-        if (Object.hasOwnProperty.call(codeUsage, key)) {
-            let language = key
-            if(key === 'javascript') {
-                language = 'jsx'
+const ComponentHero = ({ children, title='', codeUsage = {} }) => {
+   
+    const initializeTabs = (codeUsage) => {
+        const tabs = []
+        for (const key in codeUsage) {
+            if (Object.hasOwnProperty.call(codeUsage, key)) {
+                let language = key
+                if(key === 'javascript') {
+                    language = 'jsx'
+                }
+                const element = codeUsage[key];
+                tabs.push({
+                    label: key,
+                    value: key,
+                    content: <CodeBlock language={language} >{codeUsage[key]?.code}</CodeBlock>,
+                })
             }
-            const element = codeUsage[key];
-            tabs.push({
-                label: key,
-                value: key,
-                content: <CodeBlock language={language} >{codeUsage[key]?.code}</CodeBlock>,
-            })
         }
+        return tabs
     }
-    return tabs
-}
-
-
-const ComponentHero = ({ children, title='', codeUsage = {} }) => {
 
-    let data =  initializeTabs(codeUsage)
-    const [activeTab, setActiveTab] = useState(data[0]?.value)
-
+    // Use useMemo to avoid recalculating tabs unnecessarily
+    const data = useMemo(() => initializeTabs(codeUsage), [codeUsage]);
 
     return <div>
         {title &&  <BookMarkLink id={title}> <Heading>{title}</Heading> </BookMarkLink>}
@@ -45,22 +38,10 @@ const ComponentHero = ({ children, title='', codeUsage = {} }) => {
         </div>
         <div>
             <div>
-                <Tabs.Root defaultValue={activeTab} onValueChange={(value)=>{
-                    setActiveTab(value)
-                }}>
-                    <Tabs.List>
-                        {data.map((tab, index) => (
-                            <Tabs.Trigger key={index} value={tab.value}>{tab.label}</Tabs.Trigger>
-                        ))}
-                    </Tabs.List>
-                    {data.map((tab, index) => (
-                            <Tabs.Content key={index} value={tab.value}>{tab.content}</Tabs.Content>
-                        ))}
-                </Tabs.Root>
+                <CodeTabs data={data} />
             </div>
         </div>
     </div>
-
 }
 
 export default ComponentHero;