done!

src/index.css

@@ -53,11 +53,13 @@
  flex-basis: auto;
 }
 
-.ch-codeblock .ch-code-button {
+.ch-codeblock .ch-code-button,
+.ch-codegroup .ch-editor-button {
  display: none;
 }
 
-.ch-codeblock:hover .ch-code-button {
+.ch-codeblock:hover .ch-code-button,
+.ch-codegroup:hover .ch-editor-button {
  display: block;
 }
 

src/routes/compound-component/_components/Tabs/Goto.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { useTabsContext } from './Context';
+
+export interface GotoProps {
+ to: string;
+ children?: ReactNode;
+}
+
+export const Goto = ({ to, children }: GotoProps) => {
+ const { setActiveTab } = useTabsContext();
+
+ return (
+ <span
+ className="cursor-pointer underline decoration-purple-400 decoration-dotted decoration-2 underline-offset-4 hover:decoration-purple-700"
+ onClick={() => setActiveTab(to)}
+ >
+ {children}
+ </span>
+ );
+};

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

@@ -0,0 +1,66 @@
+import { MarigoldProvider } from '@marigold/components';
+import theme from '@marigold/theme-core';
+
+import { Tabs } from './Tabs';
+import { Goto } from './Tabs/Goto';
+
+const App = () => (
+ <MarigoldProvider theme={theme} className="h-[400px]">
+ <Tabs defaultActiveTab="description">
+ <Tabs.List>
+ <Tabs.Item id="description">Description</Tabs.Item>
+ <Tabs.Item id="locations">Locations</Tabs.Item>
+ <Tabs.Item id="merchandise">Merchandise</Tabs.Item>
+ </Tabs.List>
+ <Tabs.Panel id="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>
+ <p>
+ Curious about the event details? Find out{' '}
+ <Goto to="locations">when and where</Goto> DJ Wobblemeister will be
+ turning up the wobble! Make sure to check out our exclusive{' '}
+ <Goto to="merchandise">merchandise</Goto>. Only available during the
+ tour!
+ </p>
+ </div>
+ </Tabs.Panel>
+ <Tabs.Panel id="locations">
+ <div className="prose">
+ <ul className="m-0">
+ <li>Wobbleville - June 20th</li>
+ <li>Bass City - June 25th</li>
+ <li>Quirkytown - July 1st</li>
+ <li>Beatsburgh - July 5th</li>
+ </ul>
+ <p>
+ <Goto to="description">Back to the description</Goto>
+ </p>
+ </div>
+ </Tabs.Panel>
+ <Tabs.Panel id="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>
+ <p>
+ <Goto to="description">Back to the description</Goto>
+ </p>
+ </div>
+ </Tabs.Panel>
+ </Tabs>
+ </MarigoldProvider>
+);
+
+export default App;

src/routes/compound-component/index.mdx

@@ -8,8 +8,8 @@ import Preview from '@/components/Preview';
 import SelectExample from './_components/SelectExample';
 import TabsBasicExample from './_components/TabsBasicExample';
 import TabsAnatomy from './_components/TabsAnatomy';
-import TabsExample from './_components/TabsExample';
 import TabsActionExample from './_components/TabsActionExample';
+import TabsGotoExample from './_components/TabsGotoExample';
 
 import TabsBaiscContent from './_components/tabs-basic.mdx';
 import TabsCompoundComponentContent from './_components/tabs-compound-component.mdx';
@@ -261,29 +261,44 @@ the state of the `<Tabs>` component. The state is entirely encapsulated within t
 component, making it impossible to accommodate dynamic interactions like switching tabs
 from within the content.
 
-Lucky for us, we won't encounter this issue when using compound components.
+With compound components, implementing such a feature becomes straightforward. By utilizing the
+tabs' context, which provides access to the shared state, we can create additional components
+that both access and update this state, just like `<Tab.Item>` or `<Tab.Panel>` do.
 
-</Content>
+<CH.Code>
 
-<Content>
+```tsx Goto.tsx
+// from ./_components/Tabs/Goto.tsx
+```
 
----
+```tsx App.tsx focus=24:30
+// from ./_components/TabsGotoExample.tsx
+```
 
-However, by breaking down the component into smaller, more focused parts,
+</CH.Code>
 
-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.
+Here's our example showcasing the new `<Goto>` component in action!
 
 <Preview>
- <TabsExample />
+ <TabsGotoExample />
 </Preview>
 
-downsides of this implementation: we have a very ugly "data object" with all information and JSX as property inside it. this makes it hard(er) to work with the ... why?
-add a new feature that jumps to a certain tab, making this almost like a wizard (using TabsContext) or something.
+## Conclusion
+
+At first glance, building compound components might seem daunting and complex.
+However, understanding this approach is essential for ["thinking in React"](https://react.dev/learn/thinking-in-react).
+This pattern emphasizes the power of React's component model, enabling us
+to create highly reusable and intuitive components.
 
-!!! When it is not a good idea to use compound components!?
+Compound components provide a robust approach to designing React components
+where related functionality is grouped together under a common parent component.
+This design pattern fosters better organization and maintainability by encapsulating
+shared state and logic within the parent component, while allowing child components
+to focus on specific responsibilities.
 
-we demonstracted how powerful and convenient compound components can be for extending functionality and maintaining clean, scalable code.
+Like shown in our examples, using this structure enhances code readability and makes
+it easier to extend and customize components without directly modifying their
+internals. In general, compound components are ideal for creating complex UI components
+that require cohesive interaction and seamless integration of different functionalities.
 
 </Content>