feat: enhance documentation components

Author: LeadcodeDev

apps/docs/src/content/docs/my-lib/default/en/guides/components.mdx

@@ -80,7 +80,7 @@ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor i
 
 :::::content-preview
 
-```
+```mdx
 ::::card-group{cols=3}
   :::card{label="Lorem ipsum dolor sit amet" icon="lucide:bell"}
     Lorem ipsum dolor sit amet, consectetur adipiscing elit,

packages/mdx/package.json

@@ -8,6 +8,7 @@
     "./components/callout.astro": "./src/components/callout/callout.astro",
     "./components/card-group.astro": "./src/components/card-group/card-group.astro",
     "./components/card.astro": "./src/components/card-group/card.astro",
+    "./components/tabs": "./src/components/tabs/tabs.tsx",
     "./components/tabs.astro": "./src/components/tabs/tabs.astro",
     "./components/tab.astro": "./src/components/tabs/tab.astro",
     "./components/steps.astro": "./src/components/steps/steps.astro",

packages/mdx/src/components/tabs/tabs.tsx

@@ -15,36 +15,48 @@ interface TabProps {
 }
 
 export function Tabs({ items, children, className }: TabsProps) {
-  const [activeTab, setActiveTab] = React.useState(items[0])
+  const [activeTab, setActiveTab] = React.useState(0)
+  const containerRef = React.useRef<HTMLDivElement>(null)
 
-  const childArray = React.Children.toArray(children)
+  React.useEffect(() => {
+    if (!containerRef.current) return
+
+    const codeBlocks = containerRef.current.querySelectorAll('.code-block')
+    if (codeBlocks.length > 0) {
+      codeBlocks.forEach((el, index) => {
+        ;(el as HTMLElement).style.display = index === activeTab ? 'block' : 'none'
+      })
+    } else {
+      const preElements = containerRef.current.querySelectorAll('pre')
+      preElements.forEach((el, index) => {
+        ;(el as HTMLElement).style.display = index === activeTab ? 'block' : 'none'
+      })
+    }
+  }, [activeTab])
 
   return (
     <div className={cn('my-4', className)}>
       <div className="flex border-b" role="tablist">
-        {items.map((item) => (
+        {items.map((item, index) => (
           <button
             key={item}
             role="tab"
-            aria-selected={activeTab === item}
+            type="button"
+            aria-selected={activeTab === index}
             className={cn(
-              'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px',
-              activeTab === item
+              'px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px cursor-pointer',
+              activeTab === index
                 ? 'border-primary text-primary'
                 : 'border-transparent text-muted-foreground hover:text-foreground',
             )}
-            onClick={() => setActiveTab(item)}
+            onClick={() => setActiveTab(index)}
           >
             {item}
           </button>
         ))}
       </div>
-      <div className="pt-4">
-        {childArray.map((child, index) => (
-          <div key={items[index]} hidden={activeTab !== items[index]}>
-            {child}
-          </div>
-        ))}
+      <div ref={containerRef} className="pt-4 [&_.code-block-header]:hidden [&_.code-block]:my-0 [&_.code-block]:rounded-none [&_.code-block]:border-0 [&_pre]:my-0 [&_pre]:rounded-none [&_pre]:border-0">
+        {children}
       </div>
     </div>
   )

packages/mdx/src/overrides/pre/pre.astro

@@ -60,12 +60,13 @@ const languageIcons: Record<string, string> = {
 const lang = (language || '').toLowerCase()
 const lbl = (label || '').toLowerCase()
 
+const slotHtml = await Astro.slots.render('default')
+
 let icon = languageIcons[lbl] || languageIcons[lang] || 'mdi:code-tags'
 
 // For shell languages, detect package manager from content
 if (['bash', 'sh', 'shell'].includes(lang)) {
-  const html = await Astro.slots.render('default')
-  const text = html.replace(/<[^>]+>/g, '').trim()
+  const text = slotHtml.replace(/<[^>]+>/g, '').trim()
   const match = text.match(/^(\w+)/)
   if (match) {
     const cmd = match[1].toLowerCase()
@@ -89,13 +90,13 @@ if (['bash', 'sh', 'shell'].includes(lang)) {
         data-language={language}
         data-label={label}
         {...props}
-      ><slot /></pre>
+      ><Fragment set:html={slotHtml} /></pre>
     </div>
   </div>
 ) : (
   <pre
     class={cn('my-4 overflow-x-auto rounded-lg border bg-muted p-4 text-sm leading-relaxed', className)}
     data-language={language}
     {...props}
-  ><slot /></pre>
+  ><Fragment set:html={slotHtml} /></pre>
 )}

packages/mdx/src/remark-auto-import.ts

@@ -4,8 +4,6 @@ const importStatements = [
   `import Callout from '@explainer/mdx/components/callout.astro'`,
   `import CardGroup from '@explainer/mdx/components/card-group.astro'`,
   `import Card from '@explainer/mdx/components/card.astro'`,
-  `import Tabs from '@explainer/mdx/components/tabs.astro'`,
-  `import Tab from '@explainer/mdx/components/tab.astro'`,
   `import Steps from '@explainer/mdx/components/steps.astro'`,
   `import Step from '@explainer/mdx/components/step.astro'`,
   `import CodeGroup from '@explainer/mdx/components/code-group.astro'`,