update

src/index.css

@@ -28,6 +28,10 @@
  margin: theme('spacing.8') 0;
 }
 
+.ch-code-wrapper {
+ padding: 0 theme('spacing.1');
+}
+
 .ch-scrollycoding-step-content {
  padding: theme('spacing.6');
 }

src/routes/compound-component/_components/TabsBasicExample.tsx

@@ -3,51 +3,51 @@ import theme from '@marigold/theme-core';
 
 import { Tabs } from './TabsBasic';
 
-// Content
-// ---------------
-const Description = () => (
- <div className="prose">
- <strong>DJ Wobblemeister's Wobble Extravaganza</strong>
- <p className="m-0">
- Join us for an unforgettable night with DJ Wobblemeister, the maestro of
- wobble beats and king of quirky dance moves. Expect an evening filled with
- thumping bass, wobbly rhythms, and an unparalleled light show. It's going
- to be a wobbly good time!
- </p>
- </div>
-);
-
-const Locations = () => (
- <ul className="prose m-0">
- <li>Wobbleville - June 20th</li>
- <li>Bass City - June 25th</li>
- <li>Quirkytown - July 1st</li>
- <li>Beatsburgh - July 5th</li>
- </ul>
-);
-
-const Merchandise = () => (
- <div className="prose">
- <p className="mt-0">
- Grab your exclusive DJ Wobblemeister merchandise at the concert!
- </p>
- <ul>
- <li>Wobble Hats - $25</li>
- <li>Quirky T-Shirts - $30</li>
- <li>Bass Boosted Hoodies - $50</li>
- <li>Glow-in-the-dark Wobble Wristbands - $10</li>
- </ul>
- </div>
-);
-
 const App = () => (
- // add height so the example does not jump
  <MarigoldProvider theme={theme} className="h-[340px]">
  <Tabs
  tabs={[
- { title: 'Description', content: <Description /> },
- { title: 'Locations', content: <Locations /> },
- { title: 'Merchandise', content: <Merchandise /> },
+ {
+ title: 'Description',
+ content: (
+ <div className="prose">
+ <strong>DJ Wobblemeister's Wobble Extravaganza</strong>
+ <p className="m-0">
+ Join us for an unforgettable night with DJ Wobblemeister, the
+ maestro of wobble beats and king of quirky dance moves. Expect
+ an evening filled with thumping bass, wobbly rhythms, and an
+ unparalleled light show. It's going to be a wobbly good time!
+ </p>
+ </div>
+ ),
+ },
+ {
+ title: 'Locations',
+ content: (
+ <ul className="prose m-0">
+ <li>Wobbleville - June 20th</li>
+ <li>Bass City - June 25th</li>
+ <li>Quirkytown - July 1st</li>
+ <li>Beatsburgh - July 5th</li>
+ </ul>
+ ),
+ },
+ {
+ title: 'Merchandise',
+ content: (
+ <div className="prose">
+ <p className="mt-0">
+ Grab your exclusive DJ Wobblemeister merchandise at the concert!
+ </p>
+ <ul>
+ <li>Wobble Hats - $25</li>
+ <li>Quirky T-Shirts - $30</li>
+ <li>Bass Boosted Hoodies - $50</li>
+ <li>Glow-in-the-dark Wobble Wristbands - $10</li>
+ </ul>
+ </div>
+ ),
+ },
  ]}
  />
  </MarigoldProvider>

src/routes/compound-component/_components/TabsExample.tsx

@@ -4,7 +4,6 @@ import theme from '@marigold/theme-core';
 import { Tabs } from './Tabs';
 
 const App = () => (
- // add height so the example does not jump
  <MarigoldProvider theme={theme} className="h-[340px]">
  <Tabs defaultActiveTab="description">
  <Tabs.List>

src/routes/compound-component/_components/compare-implementation.mdx

@@ -0,0 +1,30 @@
+import { Block } from '@/components/Container';
+
+<Block>
+ <CH.Scrollycoding>
+
+```tsx TabsBasic.tsx
+// from ./TabsBasicExample.tsx 8:52
+```
+
+When comparing the two implementations, one notable difference is how the tabs are defined and organized.
+In the implementation on the right, the tabs are passed as an array of objects directly to the `<Tabs>`
+component, with each object containing a `title` and `content`property.
+
+---
+
+```tsx TabsCompoundComponent.tsx
+// from ./TabsExample.tsx 8:45
+```
+
+On the other hand, the second implementation separates the tabs into `<Tabs.Item>` components within a
+`<Tabs.List>` component and associates each tab with its respective content panel using `<Tabs.Panel>`
+components.
+
+This implementation offers better separation of concerns and encapsulation of logic. It allows for more
+explicit and readable code, as each component is responsible for its own specific functionality.
+Additionally, the use of compound components makes it easier to understand the relationship between
+the tabs and their content panels.
+
+ </CH.Scrollycoding>
+</Block>

src/routes/compound-component/_components/tabs-compound-component.mdx

@@ -102,11 +102,9 @@ triggering a re-render to reflect the new active tab.
 
 ### `<Tab.Panel>`
 
-The job of the `<Tab.Panel>` component is to display its content only when its `id` matches the `id` of the currently active tab.
-When this condition is met, it renders its `children`; otherwise, it renders nothing (`null`). This ensures that only the content
-of the active tab is displayed while the rest remains hidden.
+The responsibility of the `<Tab.Panel>` component is to display its content only when its `id` matches the `id` of the currently
+active tab. It retrieves the current active tab from the context (`activeTab`). When this condition is met, it renders its `children`;
+otherwise, it renders nothing (`null`). This ensures that only the content of the active tab is displayed while the rest remains hidden.
 
  </CH.Scrollycoding>
 </Block>
-
-!!! write about exposing the children

src/routes/compound-component/index.mdx

@@ -1,4 +1,4 @@
-import { Message } from '@marigold/components';
+import { Columns, Message } from '@marigold/components';
 
 import { Block, Content } from '@/components/Container';
 import Caption from '@/components/Caption';
@@ -12,6 +12,7 @@ import TabsExample from './_components/TabsExample';
 
 import TabsBaiscContent from './_components/tabs-basic.mdx';
 import TabsCompoundComponentContent from './_components/tabs-compound-component.mdx';
+import CompareImplementation from './_components/compare-implementation.mdx';
 
 <Block className='text-center'>
 
@@ -176,6 +177,32 @@ for setting up this shared state, managing the state of the tabs, and providing
 <TabsCompoundComponentContent />
 
 <Content>
+ This wraps up our overview of the Tabs component and its child components. At
+ first glance, the benefits of this refactoring might not be immediately
+ obvious. However, as we delve deeper into comparing the two implementations,
+ the advantages of this refactoring become more apparent. Let's take a closer
+ look at each approach and examine their respective strengths and weaknesses.
+
+## Benefits of Compound Components
+
+To begin with, let's compare the code of the two implementations and see how they
+fare when used to build the "DJ Wobblemeister's Wobble Extravaganza" example.
+
+</Content>
+
+<CompareImplementation />
+
+<Content>
+
+Overall, the second implementation using compound components is cleaner, more maintainable compared to the first implementation.
+
+---
+
+However, by breaking down the component into smaller, more focused parts,
+
+we've made the code easier to understand and maintain. Before this
+refactoring, achieving the same outcome would have required writing more
+complex and tightly coupled code.
 
 <Preview>
  <TabsExample />

tailwind.config.js

@@ -3,7 +3,11 @@ import { fontFamily } from 'tailwindcss/defaultTheme';
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
- content: [...preset.content, './index.html', './src/**/*.{js,ts,jsx,tsx}'],
+ content: [
+ ...preset.content,
+ './index.html',
+ './src/**/*.{js,ts,jsx,tsx,mdx}',
+ ],
  theme: {
  fontFamily: {
  sans: ['Inter', ...fontFamily.sans],

vite.config.ts

@@ -25,7 +25,7 @@ export default defineConfig(async () => {
  [
  remarkCodeHike,
  {
- lineNumbers: true,
+ lineNumbers: false,
  showCopyButton: true,
  theme: 'material-palenight',
  },