[WIP] Refactoring complex code components

packages/website/ts/components/docs/code.tsx

@@ -35,8 +35,6 @@ export const Code: React.FC<ICodeProps> = ({ children, className = 'language-typ
 
     return (
         <>
-            <Tab>{language}</Tab>
-
             <CopyToClipboard text={children} onCopy={handleCopyClick}>
                 <CopyButton>{copyButtonText}</CopyButton>
             </CopyToClipboard>

packages/website/ts/components/docs/tabs.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 import {
@@ -11,10 +11,30 @@ import {
 import { colors } from 'ts/style/colors';
 
 interface ITabProps {
-    children: ReactNode;
+    children: React.ReactNode;
     selectedTabClassName?: string;
 }
 
+interface ICodeTabs {
+    children: React.ReactNode;
+    tabs: string[];
+}
+
+export const CodeTabs: React.FC<ICodeTabs> = ({ children, tabs }) => {
+    return (
+        <Tabs>
+            <TabList>
+                {tabs.map((tab, index) => (
+                    <Tab key={`tab-${index}`}>{tab}</Tab>
+                ))}
+            </TabList>
+            {React.Children.map(children, (child, index) => {
+                return <TabPanel key={`tabPanel-${index}`}>{child}</TabPanel>;
+            })}
+        </Tabs>
+    );
+};
+
 export const Tabs = styled(OriginalTabs).attrs({
     selectedTabClassName: 'is-active',
 })<ITabProps>`

packages/website/ts/pages/docs/view.tsx

@@ -15,7 +15,7 @@ import { InlineLink } from 'ts/components/docs/inline_link';
 import { Notification } from 'ts/components/docs/notification';
 import { SiteWrap } from 'ts/components/docs/siteWrap';
 import { Table } from 'ts/components/docs/table';
-import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
+import { CodeTabs, Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
 import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
 import { UnorderedList } from 'ts/components/docs/unordered_list';
 import { DocumentTitle } from 'ts/components/document_title';
@@ -143,6 +143,7 @@ const mdxComponents = {
     table: Table,
     ul: UnorderedList,
     Notification,
+    CodeTabs,
     Tabs,
     TabList,
     Tab,