import { useState } from 'react' ; import { FiCheck , FiClipboard } from 'react-icons/fi' ; import styles from './BreadcrumbsBar.module.css' ; interface Props { name : string ; path : string ; } function CopyableCrumb ( props ) { const { name , path } = props ; const [ isPathCopied , setPathCopied ] = useState ( false ) ; const CopyIcon = isPathCopied ? FiCheck : FiClipboard ; return ( < button className = { styles . crumbButton } type = "button" title = "Copy path to clipboard" onClick = { ( ) => { void navigator . clipboard . writeText ( path ) ; setPathCopied ( true ) ; } } onPointerLeave = { ( ) => setPathCopied ( false ) } data - current > < span className = { styles . crumb } > { name } < /span> < CopyIcon className = { styles . copyIcon } / > < /button>); } export default CopyableCrumb ;