feat: support tabs in playground component

apps/www/components/editor.tsx

@@ -1,7 +1,9 @@
 import { styled } from "@odpf/apsara";
 import { ChevronRight, Copy } from "lucide-react";
+import { themes } from 'prism-react-renderer';
 import React, { useState } from "react";
 import { LiveEditor } from "react-live";
+
 import useCopyToClipboard from "./useClipboard";
 
 interface Props {
@@ -99,7 +101,7 @@ const Editor: React.FC<Props> = ({ code }) => {
                     </SummarySafari>
                 </Summary>
                 <Area>
-                    <LiveEditor />
+                    <LiveEditor theme={themes.nightOwlLight} />
                 </Area>
             </Details>
         </StyledEditor>

apps/www/components/live.tsx

@@ -13,10 +13,14 @@ export interface Props {
 
 const Wrapper = styled('div', {
   width: '100%',
-  padding: "$4",
-  display: "flex",
+  pt: "120px",
+  pb: "120px",
   gap: "$2",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
   flexDirection: 'column',
+  background: "url(/dot.svg)",
 })
 
 const DynamicLive: React.FC<Props> = ({ code, scope }) => {

apps/www/components/playground.tsx

@@ -1,54 +1,72 @@
+import { styled, Tabs } from "@odpf/apsara";
+import dynamic from "next/dynamic";
+import React from "react";
 
-import { styled } from '@stitches/react'
-import dynamic from 'next/dynamic'
-import React from 'react'
+const DynamicLive = dynamic(() => import("./live"), {
+    ssr: false,
+    loading: () => (
+        <div style={{ padding: "32px 16px", fontSize: "12px", borderRadius: "6px", border: "1px solid #ededed" }}>
+            loading...
+        </div>
+    ),
+});
 
-const DynamicLive = dynamic(() => import('./live'), {
-  ssr: false,
-  loading: () => (
-    <div style={{ padding: '32px 16px', fontSize: "12px", borderRadius: "6px",
-    border: '1px solid #ededed' }}>
-      loading...
-    </div>
-  ),
-})
+export type Tab = {
+    name: string;
+    code: string;
+};
 
 export type PlaygroundProps = {
-  title?: React.ReactNode | string
-  desc?: React.ReactNode | string
-  code: string
-  scope: {
-    [key: string]: any
-  }
-}
+    title?: React.ReactNode | string;
+    desc?: React.ReactNode | string;
+    code: string;
+    tabs: Tab[];
+    scope: {
+        [key: string]: any;
+    };
+};
 
 const defaultProps = {
-  code: '',
-  scope: {},
-}
+    code: "",
+    tabs: [] as Tab[],
+    scope: {},
+};
 
 const StyledPlayground = styled("div", {
-  borderRadius: "$2",
-  border: '1px solid $gray4'
-})
+    borderRadius: "$2",
+    border: "1px solid $gray4",
+});
 
 const Playground: React.FC<PlaygroundProps> = React.memo(
-  ({
-    code: inputCode,
-    scope,
-  }: PlaygroundProps & typeof defaultProps) => {
-
-    const code = inputCode.trim()
-    return (
-      <>
-        <StyledPlayground>
-          <DynamicLive code={code} scope={scope} />
-        </StyledPlayground>
-      </>
-    )
-  },
-)
+    ({ code, tabs, scope }: PlaygroundProps & typeof defaultProps) => {
+        if (code) {
+            return (
+                <StyledPlayground>
+                    <DynamicLive code={code} scope={scope} />
+                </StyledPlayground>
+            );
+        }
+        return (
+            <StyledPlayground>
+                <Tabs defaultValue={tabs[0]?.name} >
+                    <Tabs.List css={{background: "transparent", p: "$4", gap: "$3", borderBottom: "1px solid $gray4"}}>
+                        {tabs.map((tab) => (
+                            <Tabs.Trigger value={tab.name} key={tab.name}>
+                                {tab.name}
+                            </Tabs.Trigger>
+                        ))}
+                    </Tabs.List>
+                    {tabs.map((tab) => (
+                        <Tabs.Content value={tab.name} key={tab.name}>
+                            <DynamicLive code={tab.code} scope={scope} />
+                        </Tabs.Content>
+                    ))}
+                </Tabs>
+            </StyledPlayground>
+        );
+    },
+);
 
-Playground.defaultProps = defaultProps
-Playground.displayName = 'Playground'
-export default Playground
+Playground.defaultProps = defaultProps;
+Playground.displayName = "Playground";
+export default Playground;

apps/www/components/preview.tsx

@@ -10,10 +10,11 @@ export const Preview = ({ css, ...props }: PreviewProps) => (
             display: "flex",
             alignItems: "flex-start",
             justifyContent: "center",
-            pt: "100px",
-            pb: "100px",
-            borderTopLeftRadius: "$4",
-            borderTopRightRadius: "$4",
+            pt: "120px",
+            pb: "120px",
+            mb: "$10",
+            borderRadius: "$4",
+            border: "1px dashed #d3d7df",
             boxShadow: "inset 0 0 0 1px $gray8",
             background: "url(/dot.svg)",
             ...css,

apps/www/content/primitives/components/button.mdx

@@ -3,58 +3,99 @@ name: button
 title: Button
 description: Displays a button or a component that looks like a button.
 ---
-import { Button, Flex } from '@odpf/apsara'
 
+import { Button, Flex } from "@odpf/apsara";
 
 <Preview>
-  <Button variant="primary">primary button</Button>
+    <Button variant="primary">primary button</Button>
 </Preview>
 
 <Description>
-Buttons are fundamental components in any user interface, serving as interactive elements for triggering actions or navigating through an application. Building reusable button primitives using Radix UI and Stitches CSS-in-JS can significantly enhance the efficiency and maintainability of your UI development process. 
+    Buttons are fundamental components in any user interface, serving as interactive elements for triggering actions or
+    navigating through an application. Building reusable button primitives using Radix UI and Stitches CSS-in-JS can
+    significantly enhance the efficiency and maintainability of your UI development process.
 </Description>
 
+## Installation
+
+Install the component from your command line.
+
+```bash
+npm install @odpf/apsara
+```
+
+## Usages
+
+Import all parts and piece them together.
+
+```bash
+import { Button } from '@odpf/apsara'
+<Button variant="primary">primary button</Button>
+```
+
 ## Basic
+
 The basic `Button`
+
 <Playground scope={{ Button }} code={`<Button>button</Button>`} />
 
-## Primary
-The primary `Button`
-<Playground scope={{ Button }} code={`<Button variant="primary">primary button</Button>`} />
+## Variant
+
+Diffrent button variants
+
+<Playground
+    scope={{ Button }}
+    tabs={[
+        {
+            name: "Primary",
+            code: `<Button variant="primary">primary button</Button>`,
+        },
+        {
+            name: "Secondry",
+            code: `<Button variant="secondary">secondary button</Button>`,
+        },
+    ]}
+/>
+
+## Scale
+
+Buttons of different sizes.
 
-## Scondry
-The secondary `Button`
-<Playground scope={{ Button }} code={`<Button variant="secondary">secondary button</Button>`} />
+<Playground
+    scope={{ Button, Flex }}
+    tabs={[
+        {
+            name: "Default",
+            code: `<Button variant="primary">primary button</Button>`,
+        },
+        {
+            name: "Small",
+            code: `<Button variant="primary" size="small">primary button</Button>`,
+        },
+        {
+            name: "Large",
+            code: `<Button variant="primary" size="large">primary button</Button>`,
+        },
+        {
+            name: "Circle",
+            code: `<Button variant="primary" size="circle">P</Button>`,
+        },
+    ]}
+/>
 
 ## Outline
+
 The Outline `Button`
+
 <Playground scope={{ Button }} code={`<Button variant="secondary" outline>secondary button</Button>`} />
 
 ## Disabled
 
 Do not respond to any action.
-<Playground scope={{ Button }} code={`<Button variant="secondary" disabled>secondary button</Button>`} />
 
-## Scale
-Buttons of different sizes.
-<Playground scope={{ Button, Flex }} code={`
-<Flex align="center" css={{gap: "8px"}}>
-  <Button variant="primary" size="small">primary button</Button>
-  <Button variant="primary">primary button</Button>
-  <Button variant="primary" size="large">primary button</Button>
-  <Button variant="primary" size="circle">P</Button>
-</Flex>
-`} />
-
-## Installation
+<Playground scope={{ Button }} code={`<Button variant="secondary" disabled>secondary button</Button>`} />
 
-Install the component from your command line.
-
-```bash
-npm install @odpf/apsara
-import { Button } from '@odpf/apsara'
-```
 
 ## API Reference
-<Attributes type="button" />
 
+<Attributes type="button" />