Add website copy button

Author: mxvsh

apps/web/src/components/websites/SnippetModal.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Button, Modal } from "@heroui/react";
 import { HugeiconsIcon } from "@hugeicons/react";
-import { CodeIcon } from "@hugeicons/core-free-icons";
+import { CodeIcon, CopyIcon, Tick02Icon } from "@hugeicons/core-free-icons";
 import type { Website } from "@/lib/api";
 
 interface Props {
@@ -11,6 +11,7 @@ interface Props {
 
 export default function SnippetModal({ website, onClose }: Props) {
   const [copied, setCopied] = useState(false);
+  const [copiedId, setCopiedId] = useState<string | null>(null);
 
   const snippet = `<script defer src="${window.location.origin}/t.js" data-website="${website?.id}"></script>`;
 
@@ -20,6 +21,13 @@ export default function SnippetModal({ website, onClose }: Props) {
     setTimeout(() => setCopied(false), 2000);
   }
 
+  function handleCopyId() {
+    navigator.clipboard.writeText(website?.id ?? "");
+    setCopiedId(website?.id ?? null);
+    setTimeout(() => setCopiedId(null), 2000);
+  }
+
+
   return (
     <Modal
       isOpen={!!website}
@@ -47,6 +55,15 @@ export default function SnippetModal({ website, onClose }: Props) {
               <pre className="bg-default rounded-xl p-4 text-xs font-mono text-foreground overflow-x-auto select-all">
                 {snippet}
               </pre>
+
+              <p className="mt-4 text-xs text-muted items-center inline-flex">
+                {website?.id}
+                <HugeiconsIcon
+                  onClick={handleCopyId}
+                  icon={
+                    copiedId === website?.id ? Tick02Icon : CopyIcon}
+                  className="w-4 h-4 ml-2" />
+              </p>
             </Modal.Body>
             <Modal.Footer>
               <Button variant="outline" onPress={onClose} className="flex-1">

apps/web/src/components/websites/WebsiteCard.tsx

@@ -5,7 +5,7 @@ import {
   Delete02Icon,
   PencilEdit01Icon,
   ArrowRight01Icon,
-  CodeSquareIcon,
+  CodeSimpleIcon,
 } from "@hugeicons/core-free-icons";
 import type { Website } from "@/lib/api";
 import WebsiteLiveCount from "./WebsiteLiveCount";
@@ -38,14 +38,15 @@ export default function WebsiteCard({ website, onSnippet, onEdit, onDelete }: Pr
               {website.url && <span>{website.url}</span>}
             </Card.Description>
           </div>
-          <div className="flex items-center gap-3 ml-3 shrink-0">
+          <div className="flex items-center ml-3 shrink-0">
             <WebsiteLiveCount websiteId={website.id} />
+            <div className="w-4"/>
             <Button
               variant="ghost"
               className="text-muted hover:text-foreground"
               onPress={() => onSnippet(website)}
             >
-              <HugeiconsIcon icon={CodeSquareIcon} size={16} />
+              <HugeiconsIcon icon={CodeSimpleIcon} size={16} />
             </Button>
             <Button
               variant="ghost"