added copy button ©

Author: ariflogs

components/ComponentShowcase.tsx

@@ -2,6 +2,7 @@ import { componentConfig } from "@/config";
 import { H5 } from "@/packages/ui";
 import { TabGroup, TabList, TabPanels, TabPanel, Tab } from "@headlessui/react";
 import React, { HTMLAttributes } from "react";
+import { CopyButton } from "./CopyButton";
 
 interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {
   name: keyof typeof componentConfig.examples;
@@ -28,7 +29,10 @@ export function ComponentShowcase({ name, children }: IComponentShowcase) {
           </div>
         </TabPanel>
         <TabPanel>
-          <div className="relative rounded overflow-auto">{Code}</div>
+          <div className="relative rounded overflow-auto">
+            <CopyButton value={Code.toString()} />
+            {Code}
+          </div>
         </TabPanel>
       </TabPanels>
     </TabGroup>

components/CopyButton.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button, IButtonProps } from "@/packages/ui";
+
+interface ICopyButtonProps extends IButtonProps {
+  value: string;
+  src?: string;
+}
+
+export async function copyToClipboardWithMeta(value: string, event?: Event) {
+  navigator.clipboard.writeText(value);
+  if (event) {
+    // trackEvent(event);
+  }
+}
+
+export function CopyButton({
+  value,
+  className,
+  src,
+  ...props
+}: ICopyButtonProps) {
+  const [hasCopied, setHasCopied] = React.useState(false);
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      setHasCopied(false);
+    }, 2000);
+  }, [hasCopied]);
+
+  return (
+    <Button
+      size="sm"
+      className={cn(
+        "relative z-10 h-6 w-6 text-zinc-50 hover:bg-zinc-700 hover:text-zinc-50 [&_svg]:h-3 [&_svg]:w-3",
+        className
+      )}
+      onClick={() => {
+        copyToClipboardWithMeta(value);
+        setHasCopied(true);
+      }}
+      {...props}
+    >
+      {hasCopied ? "Copied" : "Copy"}
+    </Button>
+  );
+}

content/docs/components/button.mdx

@@ -1,7 +1,7 @@
 ---
 title: Button
 description: This bold button makes sure your users click on it and perform the actions you want! 🚀
-lastUpdated: 12 Oct, 2024
+lastUpdated: 13 Oct, 2024
 ---
 
 <ComponentShowcase name="button-style-default" />

packages/ui/Buttons/Button.tsx

@@ -23,7 +23,7 @@ const buttonVariants = cva("font-head  transition-all", {
   },
 });
 
-interface ButtonProps
+export interface IButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {}
 
@@ -33,7 +33,7 @@ export function Button({
   className = "",
   variant = "default",
   ...props
-}: ButtonProps) {
+}: IButtonProps) {
   return (
     <button
       className={cn(buttonVariants({ variant, size }), className)}