Add button to south panel

Author: pomber

packages/mdx/dev/content/copy-button.mdx

@@ -37,3 +37,23 @@ function bar() {
 ```
 
 </CH.Code>
+
+two panels:
+
+<CH.Code>
+
+```js foo.js
+function foo() {
+  return 2
+}
+```
+
+---
+
+```js bar.js
+function bar() {
+  return 2
+}
+```
+
+</CH.Code>

packages/mdx/src/mini-editor/editor-frame.tsx

@@ -30,7 +30,8 @@ type EditorFrameProps = {
   theme: EditorTheme
   terminalPanel?: React.ReactNode
   height?: number
-  button?: React.ReactNode
+  northButton?: React.ReactNode
+  southButton?: React.ReactNode
   classes?: Classes
   onTabClick?: (filename: string) => void
 } & React.PropsWithoutRef<JSX.IntrinsicElements["div"]>
@@ -45,7 +46,8 @@ export const EditorFrame = React.forwardRef<
     terminalPanel,
     style,
     height,
-    button,
+    northButton,
+    southButton,
     theme,
     className,
     onTabClick,
@@ -70,7 +72,7 @@ export const EditorFrame = React.forwardRef<
         <TabsContainer
           tabs={northPanel.tabs}
           showFrameButtons={true}
-          button={button}
+          button={northButton}
           panel="north"
           theme={theme}
           onTabClick={onTabClick}
@@ -92,6 +94,7 @@ export const EditorFrame = React.forwardRef<
             <TabsContainer
               tabs={southPanel.tabs}
               showFrameButtons={false}
+              button={southButton}
               topBorder={true}
               panel="south"
               theme={theme}

packages/mdx/src/mini-editor/editor-tween.tsx

@@ -108,8 +108,8 @@ function EditorTween({
       southPanel={southPanel}
       terminalPanel={terminalPanel}
       theme={codeConfig.theme}
-      // TODO same for south
-      button={<CopyButton content={northContent} />}
+      northButton={<CopyButton content={northContent} />}
+      southButton={<CopyButton content={southContent} />}
     />
   )
 }

packages/mdx/src/smooth-code/copy-button.tsx

@@ -17,6 +17,7 @@ export function CopyButton({
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
+      <title>Copy</title>
       <path
         strokeLinecap="round"
         strokeLinejoin="round"