🎨 Separate copy utilities + improve copy library

Author: pheralb

website/app/components/card/cardItem.tsx

@@ -1,25 +1,56 @@
 import type { iIcons } from "@/data/svgs";
 
+import { cn } from "@/utils";
+
+import CopySource from "@/components/card/copySource";
+import CopyShadcnCommand from "@/components/card/copyShadcnCommand";
+import CopyLibraryImport from "@/components/card/copyLibraryImport";
 import OpenWithV0 from "@/components/card/openWithv0";
-import CopyIconActions from "@/components/card/copyIcon";
 
 interface iCard extends iIcons {
   isFolder: boolean;
   iconSize: number;
 }
 
 const Card = (props: iCard) => {
+  const cardItemSize = 16;
   return (
-    <div className="group flex flex-col items-center justify-center rounded-lg border border-zinc-200 px-4 pt-4 pb-2 dark:border-zinc-800">
+    <div
+      className={cn(
+        "px-4 pt-4 pb-2",
+        "relative overflow-hidden",
+        "group flex flex-col items-center justify-center space-y-2.5 rounded-md",
+        "border border-zinc-200 dark:border-zinc-800",
+      )}
+    >
       <props.icon width={props.iconSize} height={props.iconSize} />
-      <p className="mt-2 mb-1.5 text-sm tracking-tight text-black dark:text-white">
+      <p className="text-sm tracking-tight text-black dark:text-white">
         {props.name}
       </p>
+      <div
+        className={cn(
+          "absolute top-0 right-0",
+          "rounded-bl-md border-b border-l border-zinc-200 dark:border-zinc-800",
+        )}
+      >
+        <CopySource
+          iconSize={14}
+          itemName={props.name}
+          isFolder={props.isFolder}
+          ItemIcon={props.icon}
+        />
+      </div>
       <div className="flex items-center space-x-1">
-        <CopyIconActions
+        <CopyLibraryImport
+          iconSize={cardItemSize}
           itemName={props.name}
           ItemIcon={props.icon}
+        />
+        <CopyShadcnCommand
+          iconSize={cardItemSize}
+          itemName={props.name}
           isFolder={props.isFolder}
+          ItemIcon={props.icon}
         />
         <OpenWithV0
           itemName={props.name.charAt(0).toLowerCase() + props.name.slice(1)}

website/app/components/card/copyIcon.tsx

@@ -0,0 +1,40 @@
+import type { FC, SVGProps } from "react";
+
+import { clipboard } from "@/utils";
+import { toast } from "@pheralb/toast";
+import { Button } from "@/ui/button";
+import { CopyIcon } from "lucide-react";
+
+interface CopyLibraryImportProps {
+  itemName: string;
+  iconSize: number;
+  ItemIcon: FC<SVGProps<SVGSVGElement>>;
+}
+
+const CopyLibraryImport = ({
+  itemName,
+  iconSize,
+  ItemIcon,
+}: CopyLibraryImportProps) => {
+  const handleCopyFromLibrary = async () => {
+    const code = `import { ${itemName} } from "@react-symbols/icons";`;
+    await clipboard(code);
+    toast.success({
+      text: "Copied library import",
+      icon: <ItemIcon width={24} height={24} />,
+    });
+  };
+
+  return (
+    <Button
+      title="Copy library import"
+      variant="ghost"
+      size="icon"
+      onClick={handleCopyFromLibrary}
+    >
+      <CopyIcon size={iconSize} />
+    </Button>
+  );
+};
+
+export default CopyLibraryImport;

website/app/components/card/copyLibraryImport.tsx

@@ -0,0 +1,46 @@
+import type { FC, SVGProps } from "react";
+
+import { clipboard } from "@/utils";
+import { toast } from "@pheralb/toast";
+import { appConfig } from "@/config";
+import { Button } from "@/ui/button";
+import { Shadcnui } from "@/ui/icons/svgl";
+
+interface CopyShadcnCommandProps {
+  itemName: string;
+  iconSize: number;
+  isFolder?: boolean;
+  ItemIcon: FC<SVGProps<SVGSVGElement>>;
+}
+
+const CopyShadcnCommand = ({
+  itemName,
+  iconSize,
+  isFolder,
+  ItemIcon,
+}: CopyShadcnCommandProps) => {
+  const handleCopyShadcnCommand = async () => {
+    const itemNameLower = itemName.charAt(0).toLowerCase() + itemName.slice(1);
+    const makeCommand = !isFolder
+      ? `${appConfig.shadcnCommand} ${appConfig.registryUrl}${itemNameLower}.json`
+      : `${appConfig.shadcnCommand} ${appConfig.registryUrl}folders/${itemNameLower}.json`;
+
+    await clipboard(makeCommand);
+    toast.success({
+      text: "Copied shadcn/ui command",
+      icon: <ItemIcon width={24} height={24} />,
+    });
+  };
+  return (
+    <Button
+      title="Copy shadcn/ui command"
+      variant="ghost"
+      size="icon"
+      onClick={handleCopyShadcnCommand}
+    >
+      <Shadcnui width={iconSize} height={iconSize} />
+    </Button>
+  );
+};
+
+export default CopyShadcnCommand;

website/app/components/card/copyShadcnCommand.tsx

@@ -0,0 +1,82 @@
+import { useState, type FC, type SVGProps } from "react";
+
+import axios from "axios";
+import { appConfig } from "@/config";
+import { clipboard, cn } from "@/utils";
+import { toast } from "@pheralb/toast";
+import { CodeIcon, LoaderIcon } from "lucide-react";
+
+interface CopySourceProps {
+  itemName: string;
+  iconSize: number;
+  isFolder?: boolean;
+  ItemIcon: FC<SVGProps<SVGSVGElement>>;
+}
+
+const CopySource = ({
+  itemName,
+  iconSize,
+  isFolder,
+  ItemIcon,
+}: CopySourceProps) => {
+  const [isLoading, setLoading] = useState<boolean>(false);
+
+  const handleCopySource = async () => {
+    setLoading(true);
+    const itemNameLower = itemName.charAt(0).toLowerCase() + itemName.slice(1);
+    const jsonUrl = !isFolder
+      ? `${appConfig.registryUrl}${itemNameLower}.json`
+      : `${appConfig.registryUrl}folders/${itemNameLower}.json`;
+
+    try {
+      const response = await axios.get(jsonUrl);
+      const json = response.data;
+
+      if (!json.files || !json.files.length) {
+        console.error(
+          "⚠️ Error fetching or copying source code: ",
+          "No files found.",
+        );
+      }
+
+      const file = json.files[0];
+      let content = file.content as string;
+      content = content.replace(/\r\n/g, "\n");
+
+      await clipboard(content);
+      toast.success({
+        text: "Copied source code",
+        icon: <ItemIcon width={24} height={24} />,
+      });
+      setLoading(false);
+    } catch (error) {
+      console.error("⚠️ Error fetching or copying source code: ", error);
+      toast.error({
+        text: "Failed to copy source code. Please try again.",
+      });
+      setLoading(false);
+    }
+  };
+
+  return (
+    <button
+      title="Copy source code"
+      onClick={handleCopySource}
+      disabled={isLoading}
+      className={cn(
+        "cursor-pointer transition-colors",
+        isLoading && "cursor-default",
+        "p-1.5 text-zinc-500 dark:text-zinc-500",
+        "hover:text-zinc-950 dark:hover:text-zinc-50",
+      )}
+    >
+      {isLoading ? (
+        <LoaderIcon size={iconSize} className="animate-spin" />
+      ) : (
+        <CodeIcon size={iconSize} />
+      )}
+    </button>
+  );
+};
+
+export default CopySource;

website/app/components/card/copySource.tsx

@@ -12,7 +12,7 @@ interface OpenWithV0Props {
 const OpenWithV0 = ({ itemName, isFolder }: OpenWithV0Props) => {
   return (
     <ExternalLink
-      title="Open with V0"
+      title="Open with v0"
       href={
         !isFolder
           ? `${appConfig.v0URL}${appConfig.registryUrl}${itemName}.json`