Disabled copy icon

Author: shreyakurian02

components/Button.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { motion } from "framer-motion";
 import classnames from "classnames";
 
@@ -11,6 +12,8 @@ const Button = ({
   href = "",
   to = "",
   type = "button",
+  icon = null,
+  iconSize = 16,
   ...otherProps
 }) => {
   let Parent, elementSpecificProps;
@@ -31,6 +34,8 @@ const Button = ({
     if (!disabled) onClick();
   };
 
+  const Icon = icon || React.Fragment;
+
   return (
     <Parent
       onClick={handleClick}
@@ -48,6 +53,7 @@ const Button = ({
       {...elementSpecificProps}
     >
       {label && <span>{label}</span>}
+      {icon && <Icon size={iconSize} className="cs-ui-btn__icon" />}
     </Parent>
   );
 };

pages/index.js

@@ -54,7 +54,7 @@ export default function Home() {
   };
 
   const handleDemoJson = () => {
-    setInputString(JSON.stringify(DEMO_STRING));
+    setInputString(JSON.stringify(DEMO_JSON_STRING));
     setOutputString("");
   };
 
@@ -93,14 +93,21 @@ export default function Home() {
               />
             </div>
             <div className="w-full bg-[#282c34]">
-              <Copy className="ml-auto py-2" size={30} onClick={handleCopy} />
+              <Button
+                size="small"
+                style="text"
+                onClick={handleCopy}
+                icon={Copy}
+                className="float-right"
+                disabled={outputString === ""}
+              />
               <CodeMirror
                 height="548px"
                 theme={createTheme(CODE_EDITOR_THEME)}
                 editable={false}
                 value={outputString}
                 extensions={editorExtensions}
-                className="overflow-auto h-full"
+                className="overflow-auto h-full mt-7"
               />
             </div>
           </div>