43 lines
1.3 KiB
TypeScript
43 lines
1.3 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||
|
|
import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons";
|
||
|
|
import { useState } from "react";
|
||
|
|
import styles from '@/assets/styles/cid.module.css'
|
||
|
|
|
||
|
|
interface IIpfsCidProps {
|
||
|
|
label?: string;
|
||
|
|
cid: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
export function IpfsCid({ label, cid }: IIpfsCidProps) {
|
||
|
|
|
||
|
|
const [isCopied, setIsCopied] = useState(false);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={`mb-1 ${styles.container}`}>
|
||
|
|
<span className={`heading mr-1 mb-0 ${styles.label}`}>{label} </span>
|
||
|
|
<pre className={`mr-5 px-1 py-0 ${styles.cid}`}><code>{cid}</code></pre>
|
||
|
|
{(isCopied) ?
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faCheck}
|
||
|
|
className={`fas fa-check mr-3 ${styles.green}`}
|
||
|
|
></FontAwesomeIcon>
|
||
|
|
:
|
||
|
|
<FontAwesomeIcon
|
||
|
|
icon={faCopy}
|
||
|
|
className="fas fa-copy mr-3"
|
||
|
|
onClick={() => {
|
||
|
|
navigator.clipboard.writeText(cid)
|
||
|
|
setIsCopied(true)
|
||
|
|
setTimeout(() => setIsCopied(false), 3000)
|
||
|
|
}}
|
||
|
|
></FontAwesomeIcon>
|
||
|
|
}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|