Add toast on copy

src/components/Files/FileCell.tsx

@@ -1,35 +1,48 @@
 import {
   ButtonIcon,
   Cell,
+  Toast,
   WebFileIcon,
 } from "@codex-storage/marketplace-ui-components";
 import { CodexDataContent } from "@codex-storage/sdk-js";
 import { Copy } from "lucide-react";
+import { useState } from "react";
 
 type Props = {
   content: CodexDataContent;
 };
 
 export function FileCell({ content }: Props) {
-  const onCopy = (cid: string) => navigator.clipboard.writeText(cid);
+  const [toast, setToast] = useState({ time: 0, message: "" });
+
+  const onCopy = (cid: string) => {
+    navigator.clipboard.writeText(cid);
+    setToast({ message: "CID copied to the clipboard.", time: Date.now() });
+  };
 
   return (
-    <Cell>
+    <>
-      <div className="files-cell-file">
+      <Cell>
-        <WebFileIcon type={content.manifest.mimetype} />
+        <div className="files-cell-file">
+          <WebFileIcon type={content.manifest.mimetype} />
 
-        <div>
-          <b>{content.manifest.filename}</b>
           <div>
-            <small className="files-fileMeta">{content.cid}</small>
+            <b>{content.manifest.filename}</b>
-            <ButtonIcon
+            <div className="files-fileMeta">
-              variant="small"
+              <small className="files-fileMeta-cid">{content.cid}</small>
-              onClick={() => onCopy(content.cid)}
+              <ButtonIcon
-              animation="buzz"
+                variant="small"
-              Icon={(props) => <Copy size={"1rem"} {...props} />}></ButtonIcon>
+                onClick={() => onCopy(content.cid)}
+                animation="buzz"
+                Icon={(props) => (
+                  <Copy size={"1rem"} {...props} />
+                )}></ButtonIcon>
+            </div>
           </div>
         </div>
-      </div>
+
-    </Cell>
+        <Toast message={toast.message} time={toast.time} variant={"success"} />
+      </Cell>
+    </>
   );
 }