Fixes rajinwonderland#104

itsmythos · Nov 3, 2023 · ce7abf0 · ce7abf0
1 parent 7a1c459
commit ce7abf0
Showing 1 changed file with 16 additions and 5 deletions.
diff --git a/packages/react-code-blocks/src/components/CopyBlock.tsx b/packages/react-code-blocks/src/components/CopyBlock.tsx
@@ -34,7 +34,11 @@ export interface CopyBlockProps {
   [x: string]: any;
 }
 
-type CascadedProps = Partial<CopyBlockProps> & { theme: Theme };
+type CascadedProps = Partial<CopyBlockProps> & {
+  theme: Theme;
+  $codeBlock?: boolean;
+  $copied?: boolean;
+};
 
 const Button = styled.button<CascadedProps>`
   position: absolute;
@@ -51,7 +55,7 @@ const Button = styled.button<CascadedProps>`
   max-width: 2rem;
   padding: 0.25rem;
   &:hover {
-    opacity: ${(p: CascadedProps) => (p.copied ? 1 : 0.5)};
+    opacity: ${(p: CascadedProps) => (p.$copied ? 1 : 0.5)};
   }
   &:focus {
     outline: none;
@@ -67,7 +71,8 @@ const Snippet = styled.div<CascadedProps>`
   position: relative;
   background: ${(p: CascadedProps) => p.theme.backgroundColor as string};
   border-radius: 0.25rem;
-  padding: ${(p: CascadedProps) => (p.codeBlock ? `0.25rem 0.5rem 0.25rem 0.25rem` : `0.25rem`)};
+  padding: ${(p: CascadedProps) =>
+    p.$codeBlock ? `0.25rem 0.5rem 0.25rem 0.25rem` : `0.25rem`};
 `;
 
 export default function CopyBlock({
@@ -86,15 +91,21 @@ export default function CopyBlock({
   };
 
   return (
-    <Snippet {...{ codeBlock }} style={customStyle} theme={theme}>
+    <Snippet $codeBlock={codeBlock} style={customStyle} theme={theme}>
       {codeBlock ? (
         // @ts-ignore
         <CodeBlock text={text} theme={theme} {...rest} />
       ) : (
         // @ts-ignore
         <Code text={text} theme={theme} {...rest} />
       )}
-      <Button aria-label="Copy Code" type="button" onClick={handler} {...{ theme, copied }}>
+      <Button
+        aria-label="Copy Code"
+        type="button"
+        onClick={handler}
+        theme={theme}
+        $copied={copied}
+      >
         <Copy
           color={copied ? theme.stringColor : theme.textColor}
           copied={copied}