Add BadgeWithCopy component

2023-12-01 16:08:04 +01:00
parent 191a8e659c
commit c343b6754a
1 changed files with 26 additions and 0 deletions
@@ -0,0 +1,26 @@
+import copy from "copy-to-clipboard";
+import { Copy } from "lucide-react";
+import { Badge } from "./ui/badge";
+import { useToast } from "./ui/use-toast";
+
+interface BadgeWithCopyProps {
+  readonly name: string;
+  readonly toCopy: string;
+}
+
+export default function BadgeWithCopy({ name, toCopy }: BadgeWithCopyProps) {
+  const { toast } = useToast();
+
+  return (
+    <Badge
+      onClick={() => {
+        copy(toCopy);
+        toast({ description: `Copied ${name} to clipboard` });
+      }}
+      className="max-w-md self-start truncate hover:cursor-pointer"
+    >
+      <Copy className="mr-2 h-auto w-3" />
+      <span className="truncate">{toCopy}</span>
+    </Badge>
+  );
+}