From c1528d743a35f921d98a1c8ba4adc6feab8ca2e8 Mon Sep 17 00:00:00 2001
From: yarema184 <yuliana.yarema@heathmont.net>
Date: Mon, 6 Nov 2023 17:11:44 +0200
Subject: [PATCH 1/3] Add new code preview for app [MDS-771]

---
 docs/app/@types/global.d.ts                   |  3 +
 docs/app/components/server/accordion/page.tsx |  2 +-
 docs/app/components/server/button/page.tsx    |  3 +-
 docs/app/components/shared/CodeCopy.tsx       | 49 ++++++++++++
 docs/app/components/shared/CodePreview.tsx    | 14 ++--
 .../components/shared/CodePreviewWrapper.tsx  | 74 +++++++++++++++++++
 .../components/shared/ComponentPreview.tsx    |  2 +-
 docs/app/components/shared/ExampleSection.tsx | 34 +++++++--
 8 files changed, 168 insertions(+), 13 deletions(-)
 create mode 100644 docs/app/@types/global.d.ts
 create mode 100644 docs/app/components/shared/CodeCopy.tsx
 create mode 100644 docs/app/components/shared/CodePreviewWrapper.tsx

diff --git a/docs/app/@types/global.d.ts b/docs/app/@types/global.d.ts
new file mode 100644
index 0000000000..81f263a855
--- /dev/null
+++ b/docs/app/@types/global.d.ts
@@ -0,0 +1,3 @@
+type SC<P = Record<string, unknown>> = (
+  props: P & { children?: React.ReactNode }
+) => Promise<JSX.Element | null>;
diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx
index fa3b8b63c0..14176819b0 100644
--- a/docs/app/components/server/accordion/page.tsx
+++ b/docs/app/components/server/accordion/page.tsx
@@ -11,7 +11,7 @@ export default async function Accordion() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.accordion.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-7xl flex flex-col gap-8 text-moon-14">
       <h1 className="font-medium text-moon-32">Accordion</h1>
       <MDX markdown={server.accordion.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx
index 9c06553ca9..afb547bccb 100644
--- a/docs/app/components/server/button/page.tsx
+++ b/docs/app/components/server/button/page.tsx
@@ -15,12 +15,13 @@ export default async function Button() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.button.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-7xl flex flex-col gap-8 text-moon-14">
       <h1 className="font-medium text-moon-32">Button</h1>
       <MDX markdown={server.button.description} />
       <QuickNav items={examplesList} />
       <ExampleSection
         title="Default"
+        description="Buttons in moon.io have specific functions and their appearance indicates those functions to the user. To ensure that the buttons communicate the right actions, it is essential to use the appropriate variants consistently across products."
         component={<Default />}
         code={server.button.examples.Default}
       />
diff --git a/docs/app/components/shared/CodeCopy.tsx b/docs/app/components/shared/CodeCopy.tsx
new file mode 100644
index 0000000000..a72c5d0ff5
--- /dev/null
+++ b/docs/app/components/shared/CodeCopy.tsx
@@ -0,0 +1,49 @@
+import { useState, useCallback } from 'react';
+import { IconButton, Snackbar } from '@heathmont/moon-core-tw';
+import { FilesCopy } from '@heathmont/moon-icons-tw';
+
+const CodeCopy = ({ code }: { code: string }) => {
+  const [snackbar, setSnackbar] = useState('');
+
+  const openSnackbarHandler = useCallback(
+    (type: string) => {
+      if (snackbar) {
+        setSnackbar('');
+        setTimeout(() => {
+          setSnackbar(type);
+        }, 400);
+      } else {
+        setSnackbar(type);
+      }
+    },
+    [snackbar]
+  );
+
+  const copyCode = () => {
+    console.log('copyCode', code);
+    if (navigator?.clipboard) {
+      navigator.clipboard.writeText(code ? code : '');
+      openSnackbarHandler('bottom-center');
+    }
+  };
+  return (
+    <>
+      <span className="absolute top-2 right-2 cursor-pointer z-1">
+        <IconButton
+          onClick={copyCode}
+          variant="ghost"
+          icon={<FilesCopy className="text-moon-24 text-bulma stroke-1" />}
+        />
+      </span>
+      <Snackbar
+        isOpen={snackbar === 'bottom-center'}
+        onOpenChange={setSnackbar}
+        position="bottom-center"
+      >
+        <Snackbar.Message>Copy code</Snackbar.Message>
+      </Snackbar>
+    </>
+  );
+};
+
+export default CodeCopy;
diff --git a/docs/app/components/shared/CodePreview.tsx b/docs/app/components/shared/CodePreview.tsx
index 2e5d83169f..1f7a8af676 100644
--- a/docs/app/components/shared/CodePreview.tsx
+++ b/docs/app/components/shared/CodePreview.tsx
@@ -1,7 +1,11 @@
-const CodePreview = ({ code }: { code: string }) => (
-  <pre className="theme-moon-dark bg-gohan text-bulma rounded-moon-s-sm p-4">
-    {code}
-  </pre>
-);
+import CodePreviewWrapper from './CodePreviewWrapper';
+
+const CodePreview = ({ code }: { code: string }) => {
+  return (
+    <CodePreviewWrapper code={code}>
+      <pre id="code">{code}</pre>
+    </CodePreviewWrapper>
+  );
+};
 
 export default CodePreview;
diff --git a/docs/app/components/shared/CodePreviewWrapper.tsx b/docs/app/components/shared/CodePreviewWrapper.tsx
new file mode 100644
index 0000000000..db0f3a9b11
--- /dev/null
+++ b/docs/app/components/shared/CodePreviewWrapper.tsx
@@ -0,0 +1,74 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { mergeClassnames } from '@heathmont/moon-base-tw';
+import { ControlsChevronDown } from '@heathmont/moon-icons-tw';
+import CodeCopy from './CodeCopy';
+
+const CodePreviewWrapper = ({
+  children,
+  code,
+}: {
+  children?: React.ReactNode;
+  code: string;
+}) => {
+  const [expand, setExpand] = useState(false);
+  const [height, setHeight] = useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const clickHandler = () => {
+    setExpand(!expand);
+  };
+  useEffect(() => {
+    if (wrapperRef) {
+      setHeight(wrapperRef?.current?.querySelector('#code')?.clientHeight || 0);
+    }
+  }, []);
+  return (
+    <div
+      ref={wrapperRef}
+      className={mergeClassnames(
+        'relative text-bulma p-4 pb-10 overflow-hidden '
+      )}
+    >
+      <div
+        className={mergeClassnames(
+          'max-h-32 transition-[max-height] duration-150 ease-in-out overflow-x-scroll',
+          expand && 'max-h-96 overflow-scroll'
+        )}
+      >
+        {children}
+      </div>
+      <CodeCopy code={code} />
+      {height > 72 && (
+        <div
+          className={mergeClassnames(
+            'absolute bottom-0 inset-x-0 h-32 flex items-end z-0',
+            !expand &&
+              'bg-[linear-gradient(180deg,_rgba(245,_245,_245,_0.00)_0%,_#F5F5F5_100%)]'
+          )}
+        >
+          <button
+            onClick={clickHandler}
+            className={mergeClassnames(
+              'px-4 h-10 py-2 gap-2 text-moon-14 rounded-b-moon-i-sm relative z-0 flex justify-center items-center font-medium',
+              'no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 hover:bg-heles text-trunks bg-transparent hover:text-bulma w-full'
+            )}
+          >
+            {expand ? (
+              <span className="flex items-center justify-center gap-2">
+                Collapsed code{' '}
+                <ControlsChevronDown className="text-moon-24 rotate-180" />
+              </span>
+            ) : (
+              <span className="flex items-center justify-center gap-2">
+                Expand code <ControlsChevronDown className="text-moon-24" />
+              </span>
+            )}
+          </button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CodePreviewWrapper;
diff --git a/docs/app/components/shared/ComponentPreview.tsx b/docs/app/components/shared/ComponentPreview.tsx
index a077a8fd40..3b9947a79a 100644
--- a/docs/app/components/shared/ComponentPreview.tsx
+++ b/docs/app/components/shared/ComponentPreview.tsx
@@ -1,7 +1,7 @@
 const ComponentPreview = ({ component }: { component: JSX.Element }) => (
   <div
     className={
-      'flex flex-wrap items-center justify-around p-4 gap-2 w-full bg-gohan rounded-moon-s-sm'
+      'flex flex-wrap items-center justify-around p-8 gap-2 w-full rounded-moon-s-sm border border-beerus bg-goku'
     }
   >
     {component}
diff --git a/docs/app/components/shared/ExampleSection.tsx b/docs/app/components/shared/ExampleSection.tsx
index 937f41ac13..e6cfde833d 100644
--- a/docs/app/components/shared/ExampleSection.tsx
+++ b/docs/app/components/shared/ExampleSection.tsx
@@ -1,17 +1,41 @@
+import { mergeClassnames } from '@heathmont/moon-base-tw';
+import { GenericLink } from '@heathmont/moon-icons-tw';
 import CodePreview from './CodePreview';
 import ComponentPreview from './ComponentPreview';
 
 type Props = {
   title: string;
+  description?: string | JSX.Element;
   component: JSX.Element;
   code: string;
 };
 
-const ExampleSection = async ({ title, component, code }: Props) => (
-  <div className="space-y-2">
-    <h2 id={title} className="text-moon-24 font-medium">{title}</h2>
-    <ComponentPreview component={component} />
-    <CodePreview code={code} />
+const ExampleSection: SC<Props> = async ({
+  title,
+  description,
+  component,
+  code,
+}) => (
+  <div
+    className={mergeClassnames(
+      'flex flex-col gap-4 pt-8 relative',
+      "before:content-[''] before:w-full before:h-px before:bg-beerus before:absolute before:top-0 before:inset-x-0"
+    )}
+  >
+    <h2
+      id={title}
+      className=" text-moon-20 font-medium flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"
+    >
+      {title}
+      <GenericLink className="text-piccolo text-moon-16 opacity-0 transition-opacity stroke-1" />
+    </h2>
+    {description && (
+      <div className="text-moon-16 text-bulma">{description}</div>
+    )}
+    <div className="bg-beerus rounded-moon-i-sm overflow-hidden mt-2">
+      <ComponentPreview component={component} />
+      <CodePreview code={code} />
+    </div>
   </div>
 );
 

From 712e376ffb92b0a10b2b63161ec432033d8ccd53 Mon Sep 17 00:00:00 2001
From: yarema184 <yuliana.yarema@heathmont.net>
Date: Tue, 7 Nov 2023 16:27:04 +0200
Subject: [PATCH 2/3] New code preview widget [MDS-771]

---
 docs/app/components/server/accordion/page.tsx |  2 +-
 docs/app/components/server/button/page.tsx    |  2 +-
 docs/app/components/server/checkbox/page.tsx  |  2 +-
 docs/app/components/server/chip/page.tsx      |  2 +-
 docs/app/components/server/input/page.tsx     |  2 +-
 docs/app/components/server/loader/page.tsx    |  2 +-
 .../components/server/nativeSelect/page.tsx   |  2 +-
 .../app/components/server/pagination/page.tsx |  2 +-
 docs/app/components/server/table/page.tsx     |  2 +-
 docs/app/components/server/tabs/page.tsx      |  2 +-
 docs/app/components/server/tag/page.tsx       |  2 +-
 docs/app/components/shared/CodeCopy.tsx       | 13 ++++---
 .../components/shared/CodePreviewWrapper.tsx  | 35 +++++++++----------
 .../components/shared/ComponentPreview.tsx    |  2 +-
 docs/app/components/shared/ExampleSection.tsx | 23 ++++++------
 15 files changed, 47 insertions(+), 48 deletions(-)

diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx
index 14176819b0..718b590d9c 100644
--- a/docs/app/components/server/accordion/page.tsx
+++ b/docs/app/components/server/accordion/page.tsx
@@ -11,7 +11,7 @@ export default async function Accordion() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.accordion.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-8 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Accordion</h1>
       <MDX markdown={server.accordion.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx
index afb547bccb..6089606b21 100644
--- a/docs/app/components/server/button/page.tsx
+++ b/docs/app/components/server/button/page.tsx
@@ -15,7 +15,7 @@ export default async function Button() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.button.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-8 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Button</h1>
       <MDX markdown={server.button.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/checkbox/page.tsx b/docs/app/components/server/checkbox/page.tsx
index 63ce389451..af86b1b326 100644
--- a/docs/app/components/server/checkbox/page.tsx
+++ b/docs/app/components/server/checkbox/page.tsx
@@ -8,7 +8,7 @@ export default async function Checkbox() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.checkbox.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Checkbox</h1>
       <MDX markdown={server.checkbox.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/chip/page.tsx b/docs/app/components/server/chip/page.tsx
index 70ca65e179..5d3027d427 100644
--- a/docs/app/components/server/chip/page.tsx
+++ b/docs/app/components/server/chip/page.tsx
@@ -8,7 +8,7 @@ export default async function Chip() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.chip.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Chip</h1>
       <MDX markdown={server.chip.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/input/page.tsx b/docs/app/components/server/input/page.tsx
index c1c8064d43..5f2abbbad4 100644
--- a/docs/app/components/server/input/page.tsx
+++ b/docs/app/components/server/input/page.tsx
@@ -8,7 +8,7 @@ export default async function Input() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.input.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Input</h1>
       <MDX markdown={server.input.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/loader/page.tsx b/docs/app/components/server/loader/page.tsx
index 7e532cc0b6..43e7ea5168 100644
--- a/docs/app/components/server/loader/page.tsx
+++ b/docs/app/components/server/loader/page.tsx
@@ -8,7 +8,7 @@ export default async function Loader() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.loader.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Loader</h1>
       <MDX markdown={server.loader.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/nativeSelect/page.tsx b/docs/app/components/server/nativeSelect/page.tsx
index 9fe32c35d7..af647bb572 100644
--- a/docs/app/components/server/nativeSelect/page.tsx
+++ b/docs/app/components/server/nativeSelect/page.tsx
@@ -8,7 +8,7 @@ export default async function NativeSelect() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.nativeSelect.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">NativeSelect</h1>
       <MDX markdown={server.nativeSelect.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/pagination/page.tsx b/docs/app/components/server/pagination/page.tsx
index fc2ad6cbff..4b1f2ceeb8 100644
--- a/docs/app/components/server/pagination/page.tsx
+++ b/docs/app/components/server/pagination/page.tsx
@@ -8,7 +8,7 @@ export default async function Pagination() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.pagination.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Pagination</h1>
       <MDX markdown={server.pagination.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/table/page.tsx b/docs/app/components/server/table/page.tsx
index a53d5609ed..22d1e3e687 100644
--- a/docs/app/components/server/table/page.tsx
+++ b/docs/app/components/server/table/page.tsx
@@ -8,7 +8,7 @@ export default async function Table() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.table.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Table</h1>
       <MDX markdown={server.table.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/tabs/page.tsx b/docs/app/components/server/tabs/page.tsx
index e397a6dd4a..7398935c29 100644
--- a/docs/app/components/server/tabs/page.tsx
+++ b/docs/app/components/server/tabs/page.tsx
@@ -8,7 +8,7 @@ export default async function Tabs() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.tabs.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Tabs</h1>
       <MDX markdown={server.tabs.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/server/tag/page.tsx b/docs/app/components/server/tag/page.tsx
index 946da63543..d3bf686a4a 100644
--- a/docs/app/components/server/tag/page.tsx
+++ b/docs/app/components/server/tag/page.tsx
@@ -8,7 +8,7 @@ export default async function Tag() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.tag.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Tag</h1>
       <MDX markdown={server.tag.description} />
       <QuickNav items={examplesList} />
diff --git a/docs/app/components/shared/CodeCopy.tsx b/docs/app/components/shared/CodeCopy.tsx
index a72c5d0ff5..6d1618e27e 100644
--- a/docs/app/components/shared/CodeCopy.tsx
+++ b/docs/app/components/shared/CodeCopy.tsx
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import { IconButton, Snackbar } from '@heathmont/moon-core-tw';
-import { FilesCopy } from '@heathmont/moon-icons-tw';
+import { FilesCopy, GenericCheckAlternative } from '@heathmont/moon-icons-tw';
 
 const CodeCopy = ({ code }: { code: string }) => {
   const [snackbar, setSnackbar] = useState('');
@@ -23,7 +23,7 @@ const CodeCopy = ({ code }: { code: string }) => {
     console.log('copyCode', code);
     if (navigator?.clipboard) {
       navigator.clipboard.writeText(code ? code : '');
-      openSnackbarHandler('bottom-center');
+      openSnackbarHandler('top-right');
     }
   };
   return (
@@ -36,11 +36,14 @@ const CodeCopy = ({ code }: { code: string }) => {
         />
       </span>
       <Snackbar
-        isOpen={snackbar === 'bottom-center'}
+        isOpen={snackbar === 'top-right'}
         onOpenChange={setSnackbar}
-        position="bottom-center"
+        position="top-right"
       >
-        <Snackbar.Message>Copy code</Snackbar.Message>
+        <Snackbar.Message className="flex gap-2">
+          <GenericCheckAlternative className="text-moon-24 text-roshi stroke-2" />
+          Copy code
+        </Snackbar.Message>
       </Snackbar>
     </>
   );
diff --git a/docs/app/components/shared/CodePreviewWrapper.tsx b/docs/app/components/shared/CodePreviewWrapper.tsx
index db0f3a9b11..617dc82abb 100644
--- a/docs/app/components/shared/CodePreviewWrapper.tsx
+++ b/docs/app/components/shared/CodePreviewWrapper.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { mergeClassnames } from '@heathmont/moon-base-tw';
-import { ControlsChevronDown } from '@heathmont/moon-icons-tw';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
 import CodeCopy from './CodeCopy';
 
 const CodePreviewWrapper = ({
@@ -27,12 +27,12 @@ const CodePreviewWrapper = ({
     <div
       ref={wrapperRef}
       className={mergeClassnames(
-        'relative text-bulma p-4 pb-10 overflow-hidden '
+        'relative text-bulma p-4 pb-0 md:pr-12 overflow-hidden border border-t-0 border-beerus rounded-b-moon-s-sm'
       )}
     >
       <div
         className={mergeClassnames(
-          'max-h-32 transition-[max-height] duration-150 ease-in-out overflow-x-scroll',
+          'max-h-32 transition-[max-height] duration-150 ease-in-out overflow-hidden overflow-x-scroll pb-10 pt-10 md:pt-0',
           expand && 'max-h-96 overflow-scroll'
         )}
       >
@@ -42,28 +42,27 @@ const CodePreviewWrapper = ({
       {height > 72 && (
         <div
           className={mergeClassnames(
-            'absolute bottom-0 inset-x-0 h-32 flex items-end z-0',
-            !expand &&
-              'bg-[linear-gradient(180deg,_rgba(245,_245,_245,_0.00)_0%,_#F5F5F5_100%)]'
+            'absolute bottom-0 inset-x-0 h-32 flex items-end z-0 bg-[linear-gradient(180deg,_rgba(249,_250,_251,_0.00)_0%,_#F9FAFB_100%)]',
+            expand && 'h-10'
           )}
         >
           <button
             onClick={clickHandler}
             className={mergeClassnames(
-              'px-4 h-10 py-2 gap-2 text-moon-14 rounded-b-moon-i-sm relative z-0 flex justify-center items-center font-medium',
-              'no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 hover:bg-heles text-trunks bg-transparent hover:text-bulma w-full'
+              'px-4 h-10 py-2 gap-2 text-moon-14 rounded-b-moon-s-sm relative z-0 flex justify-center items-center font-medium',
+              'no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 hover:bg-heles text-bulma hover:text-bulma w-full',
+              expand ? 'bg-transperent' : 'bg-[rgba(249,_250,_251,_0.6)]'
             )}
           >
-            {expand ? (
-              <span className="flex items-center justify-center gap-2">
-                Collapsed code{' '}
-                <ControlsChevronDown className="text-moon-24 rotate-180" />
-              </span>
-            ) : (
-              <span className="flex items-center justify-center gap-2">
-                Expand code <ControlsChevronDown className="text-moon-24" />
-              </span>
-            )}
+            <span className="flex items-center justify-center gap-2">
+              {expand ? 'Collapsed code' : 'Expand code '}
+              <ControlsChevronDownSmall
+                className={mergeClassnames(
+                  'text-moon-24',
+                  expand && 'rotate-180'
+                )}
+              />
+            </span>
           </button>
         </div>
       )}
diff --git a/docs/app/components/shared/ComponentPreview.tsx b/docs/app/components/shared/ComponentPreview.tsx
index 3b9947a79a..1e9a1dbd52 100644
--- a/docs/app/components/shared/ComponentPreview.tsx
+++ b/docs/app/components/shared/ComponentPreview.tsx
@@ -1,7 +1,7 @@
 const ComponentPreview = ({ component }: { component: JSX.Element }) => (
   <div
     className={
-      'flex flex-wrap items-center justify-around p-8 gap-2 w-full rounded-moon-s-sm border border-beerus bg-goku'
+      'flex flex-wrap items-center justify-around p-8 gap-2 w-full rounded-t-moon-s-sm border border-beerus bg-goku'
     }
   >
     {component}
diff --git a/docs/app/components/shared/ExampleSection.tsx b/docs/app/components/shared/ExampleSection.tsx
index e6cfde833d..057c790870 100644
--- a/docs/app/components/shared/ExampleSection.tsx
+++ b/docs/app/components/shared/ExampleSection.tsx
@@ -16,23 +16,20 @@ const ExampleSection: SC<Props> = async ({
   component,
   code,
 }) => (
-  <div
-    className={mergeClassnames(
-      'flex flex-col gap-4 pt-8 relative',
-      "before:content-[''] before:w-full before:h-px before:bg-beerus before:absolute before:top-0 before:inset-x-0"
-    )}
-  >
-    <h2
-      id={title}
-      className=" text-moon-20 font-medium flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"
-    >
-      {title}
-      <GenericLink className="text-piccolo text-moon-16 opacity-0 transition-opacity stroke-1" />
+  <div className={mergeClassnames('flex flex-col gap-4 relative')}>
+    <h2 id={title} className="text-moon-20 font-medium ">
+      <a
+        href={`#${title}`}
+        className="flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"
+      >
+        {title}
+        <GenericLink className="text-piccolo text-moon-16 opacity-0 transition-opacity" />
+      </a>
     </h2>
     {description && (
       <div className="text-moon-16 text-bulma">{description}</div>
     )}
-    <div className="bg-beerus rounded-moon-i-sm overflow-hidden mt-2">
+    <div className="bg-gohan rounded-moon-i-sm overflow-hidden mt-2">
       <ComponentPreview component={component} />
       <CodePreview code={code} />
     </div>

From fc99df8875fd2686ff1b6351c1391b308482e2d7 Mon Sep 17 00:00:00 2001
From: yarema184 <yuliana.yarema@heathmont.net>
Date: Wed, 8 Nov 2023 10:04:47 +0200
Subject: [PATCH 3/3] code refactoring [MDS-771]

---
 docs/app/components/server/accordion/page.tsx |  2 +-
 docs/app/components/server/button/page.tsx    |  2 +-
 docs/app/components/server/checkbox/page.tsx  |  2 +-
 docs/app/components/server/chip/page.tsx      |  2 +-
 docs/app/components/server/input/page.tsx     |  2 +-
 docs/app/components/server/loader/page.tsx    |  2 +-
 .../components/server/nativeSelect/page.tsx   |  2 +-
 .../app/components/server/pagination/page.tsx |  2 +-
 docs/app/components/server/table/page.tsx     |  2 +-
 docs/app/components/server/tabs/page.tsx      |  2 +-
 docs/app/components/server/tag/page.tsx       |  2 +-
 .../components/shared/CodePreviewWrapper.tsx  | 73 -------------------
 .../{ => exampleSection}/ComponentPreview.tsx |  0
 .../{ => exampleSection}/ExampleSection.tsx   | 17 +----
 .../shared/exampleSection/HeaderSection.tsx   | 24 ++++++
 .../codePreview}/CodeCopy.tsx                 |  1 -
 .../codePreview}/CodePreview.tsx              |  2 +-
 .../wrapper/CodePreviewWrapper.tsx            | 49 +++++++++++++
 .../codePreview/wrapper/ToggleCodeBtn.tsx     | 36 +++++++++
 19 files changed, 124 insertions(+), 100 deletions(-)
 delete mode 100644 docs/app/components/shared/CodePreviewWrapper.tsx
 rename docs/app/components/shared/{ => exampleSection}/ComponentPreview.tsx (100%)
 rename docs/app/components/shared/{ => exampleSection}/ExampleSection.tsx (54%)
 create mode 100644 docs/app/components/shared/exampleSection/HeaderSection.tsx
 rename docs/app/components/shared/{ => exampleSection/codePreview}/CodeCopy.tsx (97%)
 rename docs/app/components/shared/{ => exampleSection/codePreview}/CodePreview.tsx (76%)
 create mode 100644 docs/app/components/shared/exampleSection/codePreview/wrapper/CodePreviewWrapper.tsx
 create mode 100644 docs/app/components/shared/exampleSection/codePreview/wrapper/ToggleCodeBtn.tsx

diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx
index 718b590d9c..2faab589b4 100644
--- a/docs/app/components/server/accordion/page.tsx
+++ b/docs/app/components/server/accordion/page.tsx
@@ -2,7 +2,7 @@ import { ContentOutsideSizes } from '@/app/components/server/accordion/examples/
 import { Default } from '@/app/components/server/accordion/examples/Default';
 import { Disabled } from '@/app/components/server/accordion/examples/Disabled';
 import { Sizes } from '@/app/components/server/accordion/examples/Sizes';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx
index 6089606b21..785b6b8d3f 100644
--- a/docs/app/components/server/button/page.tsx
+++ b/docs/app/components/server/button/page.tsx
@@ -6,7 +6,7 @@ import { Icons } from '@/app/components/server/button/examples/Icons';
 import { Multiline } from '@/app/components/server/button/examples/Multiline';
 import { Sizes } from '@/app/components/server/button/examples/Sizes';
 import { Variants } from '@/app/components/server/button/examples/Variants';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/checkbox/page.tsx b/docs/app/components/server/checkbox/page.tsx
index af86b1b326..4734044395 100644
--- a/docs/app/components/server/checkbox/page.tsx
+++ b/docs/app/components/server/checkbox/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/checkbox/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/chip/page.tsx b/docs/app/components/server/chip/page.tsx
index 5d3027d427..5dbde83182 100644
--- a/docs/app/components/server/chip/page.tsx
+++ b/docs/app/components/server/chip/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/chip/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/input/page.tsx b/docs/app/components/server/input/page.tsx
index 5f2abbbad4..c11af9f9ce 100644
--- a/docs/app/components/server/input/page.tsx
+++ b/docs/app/components/server/input/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/input/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/loader/page.tsx b/docs/app/components/server/loader/page.tsx
index 43e7ea5168..1dfc4ab520 100644
--- a/docs/app/components/server/loader/page.tsx
+++ b/docs/app/components/server/loader/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/loader/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/nativeSelect/page.tsx b/docs/app/components/server/nativeSelect/page.tsx
index af647bb572..c036358f0a 100644
--- a/docs/app/components/server/nativeSelect/page.tsx
+++ b/docs/app/components/server/nativeSelect/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/nativeSelect/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/pagination/page.tsx b/docs/app/components/server/pagination/page.tsx
index 4b1f2ceeb8..959350f594 100644
--- a/docs/app/components/server/pagination/page.tsx
+++ b/docs/app/components/server/pagination/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/pagination/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/table/page.tsx b/docs/app/components/server/table/page.tsx
index 22d1e3e687..ca27b93040 100644
--- a/docs/app/components/server/table/page.tsx
+++ b/docs/app/components/server/table/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/table/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/tabs/page.tsx b/docs/app/components/server/tabs/page.tsx
index 7398935c29..f30bf6582f 100644
--- a/docs/app/components/server/tabs/page.tsx
+++ b/docs/app/components/server/tabs/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/tabs/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/server/tag/page.tsx b/docs/app/components/server/tag/page.tsx
index d3bf686a4a..cbea18c67e 100644
--- a/docs/app/components/server/tag/page.tsx
+++ b/docs/app/components/server/tag/page.tsx
@@ -1,5 +1,5 @@
 import { Default } from '@/app/components/server/tag/examples/Default';
-import ExampleSection from '@/app/components/shared/ExampleSection';
+import ExampleSection from '@/app/components/shared/exampleSection/ExampleSection';
 import QuickNav from '@/app/components/shared/QuickNav';
 import { getExamples } from '@/app/utils/getExamples';
 import { MDX } from '@/components/MDX';
diff --git a/docs/app/components/shared/CodePreviewWrapper.tsx b/docs/app/components/shared/CodePreviewWrapper.tsx
deleted file mode 100644
index 617dc82abb..0000000000
--- a/docs/app/components/shared/CodePreviewWrapper.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { mergeClassnames } from '@heathmont/moon-base-tw';
-import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
-import CodeCopy from './CodeCopy';
-
-const CodePreviewWrapper = ({
-  children,
-  code,
-}: {
-  children?: React.ReactNode;
-  code: string;
-}) => {
-  const [expand, setExpand] = useState(false);
-  const [height, setHeight] = useState(0);
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const clickHandler = () => {
-    setExpand(!expand);
-  };
-  useEffect(() => {
-    if (wrapperRef) {
-      setHeight(wrapperRef?.current?.querySelector('#code')?.clientHeight || 0);
-    }
-  }, []);
-  return (
-    <div
-      ref={wrapperRef}
-      className={mergeClassnames(
-        'relative text-bulma p-4 pb-0 md:pr-12 overflow-hidden border border-t-0 border-beerus rounded-b-moon-s-sm'
-      )}
-    >
-      <div
-        className={mergeClassnames(
-          'max-h-32 transition-[max-height] duration-150 ease-in-out overflow-hidden overflow-x-scroll pb-10 pt-10 md:pt-0',
-          expand && 'max-h-96 overflow-scroll'
-        )}
-      >
-        {children}
-      </div>
-      <CodeCopy code={code} />
-      {height > 72 && (
-        <div
-          className={mergeClassnames(
-            'absolute bottom-0 inset-x-0 h-32 flex items-end z-0 bg-[linear-gradient(180deg,_rgba(249,_250,_251,_0.00)_0%,_#F9FAFB_100%)]',
-            expand && 'h-10'
-          )}
-        >
-          <button
-            onClick={clickHandler}
-            className={mergeClassnames(
-              'px-4 h-10 py-2 gap-2 text-moon-14 rounded-b-moon-s-sm relative z-0 flex justify-center items-center font-medium',
-              'no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 hover:bg-heles text-bulma hover:text-bulma w-full',
-              expand ? 'bg-transperent' : 'bg-[rgba(249,_250,_251,_0.6)]'
-            )}
-          >
-            <span className="flex items-center justify-center gap-2">
-              {expand ? 'Collapsed code' : 'Expand code '}
-              <ControlsChevronDownSmall
-                className={mergeClassnames(
-                  'text-moon-24',
-                  expand && 'rotate-180'
-                )}
-              />
-            </span>
-          </button>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default CodePreviewWrapper;
diff --git a/docs/app/components/shared/ComponentPreview.tsx b/docs/app/components/shared/exampleSection/ComponentPreview.tsx
similarity index 100%
rename from docs/app/components/shared/ComponentPreview.tsx
rename to docs/app/components/shared/exampleSection/ComponentPreview.tsx
diff --git a/docs/app/components/shared/ExampleSection.tsx b/docs/app/components/shared/exampleSection/ExampleSection.tsx
similarity index 54%
rename from docs/app/components/shared/ExampleSection.tsx
rename to docs/app/components/shared/exampleSection/ExampleSection.tsx
index 057c790870..03c584f149 100644
--- a/docs/app/components/shared/ExampleSection.tsx
+++ b/docs/app/components/shared/exampleSection/ExampleSection.tsx
@@ -1,7 +1,7 @@
 import { mergeClassnames } from '@heathmont/moon-base-tw';
-import { GenericLink } from '@heathmont/moon-icons-tw';
-import CodePreview from './CodePreview';
+import CodePreview from './codePreview/CodePreview';
 import ComponentPreview from './ComponentPreview';
+import HeaderSection from './HeaderSection';
 
 type Props = {
   title: string;
@@ -17,18 +17,7 @@ const ExampleSection: SC<Props> = async ({
   code,
 }) => (
   <div className={mergeClassnames('flex flex-col gap-4 relative')}>
-    <h2 id={title} className="text-moon-20 font-medium ">
-      <a
-        href={`#${title}`}
-        className="flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"
-      >
-        {title}
-        <GenericLink className="text-piccolo text-moon-16 opacity-0 transition-opacity" />
-      </a>
-    </h2>
-    {description && (
-      <div className="text-moon-16 text-bulma">{description}</div>
-    )}
+    <HeaderSection title={title} description={description} />
     <div className="bg-gohan rounded-moon-i-sm overflow-hidden mt-2">
       <ComponentPreview component={component} />
       <CodePreview code={code} />
diff --git a/docs/app/components/shared/exampleSection/HeaderSection.tsx b/docs/app/components/shared/exampleSection/HeaderSection.tsx
new file mode 100644
index 0000000000..0f3351143a
--- /dev/null
+++ b/docs/app/components/shared/exampleSection/HeaderSection.tsx
@@ -0,0 +1,24 @@
+import { GenericLink } from '@heathmont/moon-icons-tw';
+
+type Props = {
+  title?: string;
+  description?: string | JSX.Element;
+};
+const HeaderSection = ({ title, description }: Props) => (
+  <>
+    <h2 id={title} className="text-moon-20 font-medium ">
+      <a
+        href={`#${title}`}
+        className="flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"
+      >
+        {title}
+        <GenericLink className="text-piccolo text-moon-16 opacity-0 transition-opacity" />
+      </a>
+    </h2>
+    {description && (
+      <div className="text-moon-16 text-bulma">{description}</div>
+    )}
+  </>
+);
+
+export default HeaderSection;
diff --git a/docs/app/components/shared/CodeCopy.tsx b/docs/app/components/shared/exampleSection/codePreview/CodeCopy.tsx
similarity index 97%
rename from docs/app/components/shared/CodeCopy.tsx
rename to docs/app/components/shared/exampleSection/codePreview/CodeCopy.tsx
index 6d1618e27e..ced3cdc829 100644
--- a/docs/app/components/shared/CodeCopy.tsx
+++ b/docs/app/components/shared/exampleSection/codePreview/CodeCopy.tsx
@@ -20,7 +20,6 @@ const CodeCopy = ({ code }: { code: string }) => {
   );
 
   const copyCode = () => {
-    console.log('copyCode', code);
     if (navigator?.clipboard) {
       navigator.clipboard.writeText(code ? code : '');
       openSnackbarHandler('top-right');
diff --git a/docs/app/components/shared/CodePreview.tsx b/docs/app/components/shared/exampleSection/codePreview/CodePreview.tsx
similarity index 76%
rename from docs/app/components/shared/CodePreview.tsx
rename to docs/app/components/shared/exampleSection/codePreview/CodePreview.tsx
index 1f7a8af676..e1cd1e6472 100644
--- a/docs/app/components/shared/CodePreview.tsx
+++ b/docs/app/components/shared/exampleSection/codePreview/CodePreview.tsx
@@ -1,4 +1,4 @@
-import CodePreviewWrapper from './CodePreviewWrapper';
+import CodePreviewWrapper from './wrapper/CodePreviewWrapper';
 
 const CodePreview = ({ code }: { code: string }) => {
   return (
diff --git a/docs/app/components/shared/exampleSection/codePreview/wrapper/CodePreviewWrapper.tsx b/docs/app/components/shared/exampleSection/codePreview/wrapper/CodePreviewWrapper.tsx
new file mode 100644
index 0000000000..c6d69c053d
--- /dev/null
+++ b/docs/app/components/shared/exampleSection/codePreview/wrapper/CodePreviewWrapper.tsx
@@ -0,0 +1,49 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+import { mergeClassnames } from '@heathmont/moon-base-tw';
+import ToggleCodeBtn from './ToggleCodeBtn';
+import CodeCopy from '../CodeCopy';
+
+const CodePreviewWrapper = ({
+  children,
+  code,
+}: {
+  children?: React.ReactNode;
+  code: string;
+}) => {
+  const [expand, setExpand] = useState(false);
+  const [height, setHeight] = useState(0);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const clickHandler = () => {
+    setExpand(!expand);
+  };
+  useEffect(() => {
+    if (wrapperRef) {
+      setHeight(wrapperRef?.current?.querySelector('#code')?.clientHeight || 0);
+    }
+  }, []);
+  return (
+    <div
+      ref={wrapperRef}
+      className={mergeClassnames(
+        'relative text-bulma p-4 pb-0 md:pr-12 overflow-hidden border border-t-0 border-beerus rounded-b-moon-s-sm'
+      )}
+    >
+      <div
+        className={mergeClassnames(
+          'max-h-32 transition-[max-height] duration-150 ease-in-out overflow-hidden overflow-x-scroll pb-10 pt-10 md:pt-0',
+          expand && 'max-h-96 overflow-scroll'
+        )}
+      >
+        {children}
+      </div>
+      <CodeCopy code={code} />
+      {height > 72 && (
+        <ToggleCodeBtn expand={expand} clickHandler={clickHandler} />
+      )}
+    </div>
+  );
+};
+
+export default CodePreviewWrapper;
diff --git a/docs/app/components/shared/exampleSection/codePreview/wrapper/ToggleCodeBtn.tsx b/docs/app/components/shared/exampleSection/codePreview/wrapper/ToggleCodeBtn.tsx
new file mode 100644
index 0000000000..59c884875e
--- /dev/null
+++ b/docs/app/components/shared/exampleSection/codePreview/wrapper/ToggleCodeBtn.tsx
@@ -0,0 +1,36 @@
+import { mergeClassnames } from '@heathmont/moon-base-tw';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
+
+type Props = {
+  expand?: boolean;
+  clickHandler?: () => void;
+};
+
+const ToggleCodeBtn = ({ expand, clickHandler }: Props) => {
+  return (
+    <div
+      className={mergeClassnames(
+        'absolute bottom-0 inset-x-0 h-32 flex items-end z-0 bg-[linear-gradient(180deg,_rgba(249,_250,_251,_0.00)_0%,_#F9FAFB_100%)]',
+        expand && 'h-10'
+      )}
+    >
+      <button
+        onClick={clickHandler}
+        className={mergeClassnames(
+          'px-4 h-10 py-2 gap-2 text-moon-14 rounded-b-moon-s-sm relative z-0 flex justify-center items-center font-medium',
+          'no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 hover:bg-heles text-bulma hover:text-bulma w-full',
+          expand ? 'bg-transperent' : 'bg-[rgba(249,_250,_251,_0.6)]'
+        )}
+      >
+        <span className="flex items-center justify-center gap-2">
+          {expand ? 'Collapsed code' : 'Expand code '}
+          <ControlsChevronDownSmall
+            className={mergeClassnames('text-moon-24', expand && 'rotate-180')}
+          />
+        </span>
+      </button>
+    </div>
+  );
+};
+
+export default ToggleCodeBtn;