First update

storybookjs · Jun 19, 2024 · 9e37ae7 · 9e37ae7
1 parent 34ceb62
commit 9e37ae7
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 0 deletions.
diff --git a/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.tsx b/apps/frontpage/components/docs/mdx/code-snippets/code-snippets.tsx
@@ -44,9 +44,33 @@ export const CodeSnippetsClient: FC<CodeSnippetsClientProps> = ({
     activeRenderer,
   });
 
+  const tabs = content
+    .map((item) => item.tabTitle)
+    .filter((title) => title !== undefined);
+
+  console.log(tabs);
+
   return (
     <CodeWrapper
       copy={activeContent?.raw || ''}
+      top={
+        tabs.length > 1 ? (
+          <div className="flex gap-2">
+            {tabs.map((tab, index) => (
+              <button
+                key={index}
+                className={`rounded px-4 py-2 text-sm ${
+                  activeContent?.tabTitle === tab
+                    ? 'bg-slate-200 text-zinc-900'
+                    : 'bg-slate-50 text-zinc-600'
+                }`}
+              >
+                {tab}
+              </button>
+            ))}
+          </div>
+        ) : null
+      }
       options={
         <>
           {filters && filters.languages.length > 1 ? (

diff --git a/apps/frontpage/components/docs/mdx/code-snippets/utils/get-metadata.ts b/apps/frontpage/components/docs/mdx/code-snippets/utils/get-metadata.ts
@@ -61,6 +61,8 @@ export const getMetadata = async ({ path, activeVersion }: MetadataProps) => {
         });
       }
 
+      console.log(metadata);
+
       return {
         language: block.lang || undefined,
         ...metadata,

diff --git a/apps/frontpage/components/docs/mdx/code-snippets/wrapper.tsx b/apps/frontpage/components/docs/mdx/code-snippets/wrapper.tsx
@@ -7,16 +7,19 @@ interface CodeWrapperProps {
   children: ReactNode;
   title?: string;
   copy?: ReactNode;
+  top?: ReactNode;
 }
 
 export const CodeWrapper: FC<CodeWrapperProps> = ({
   options,
   children,
   title,
   copy,
+  top,
 }) => {
   return (
     <div className="mb-6 w-full overflow-hidden rounded border border-zinc-300 dark:border-slate-700">
+      <div>{top}</div>
       <div className="flex h-12 items-center justify-between border-b border-b-zinc-300 bg-slate-50 py-2 pl-5 pr-4 dark:border-slate-700 dark:bg-slate-950">
         <div className="flex items-center gap-2 text-sm text-black dark:text-slate-400">
           <TSIcon /> {title || ''}

diff --git a/packages/utils/src/types.ts b/packages/utils/src/types.ts
@@ -38,6 +38,7 @@ export interface CodeSnippetsProps {
   language?: string;
   content?: React.ReactNode;
   raw?: string;
+  tabTitle?: string;
 }
 
 export interface CodeSnippetsFilter {