codex-storage/codex-marketplace-ui
1
0
Fork 0
mirror of https://github.com/codex-storage/codex-marketplace-ui.git synced 2025-02-23 05:08:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add toast on copy

Browse Source
This commit is contained in:
Arnaud 2024-10-21 16:28:16 +02:00
parent 14da122bea
commit 6729e64be7
No known key found for this signature in database
GPG Key ID: 69D6CE281FCAE663
1 changed files with 27 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
src/components/Files/FileCell.tsx
View File

@ -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">
<WebFileIcon type={content.manifest.mimetype} />
<>
<Cell>
<div className="files-cell-file">
<WebFileIcon type={content.manifest.mimetype} />
<div>
<b>{content.manifest.filename}</b>
<div>
<small className="files-fileMeta">{content.cid}</small>
<ButtonIcon
variant="small"
onClick={() => onCopy(content.cid)}
animation="buzz"
Icon={(props) => <Copy size={"1rem"} {...props} />}></ButtonIcon>
<b>{content.manifest.filename}</b>
<div className="files-fileMeta">
<small className="files-fileMeta-cid">{content.cid}</small>
<ButtonIcon
variant="small"
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>
</>
);
}