46 lines
1.0 KiB
TypeScript
46 lines
1.0 KiB
TypeScript
import { useState, HTMLProps } from 'react'
|
|
import { CopyIcon, CheckIcon } from '@primer/octicons-react'
|
|
|
|
import { cn } from '~/utils/cn'
|
|
import { toast } from '~/components/Toaster'
|
|
|
|
interface Props extends HTMLProps<HTMLSpanElement> {
|
|
isCopyable?: boolean
|
|
}
|
|
|
|
export default function Code(props: Props) {
|
|
const [isCopied, setIsCopied] = useState(false)
|
|
|
|
return (
|
|
<>
|
|
<code className={cn(
|
|
'bg-ui-100 dark:bg-ui-800 p-0.5 rounded-md',
|
|
props.className
|
|
)}>
|
|
{props.children}
|
|
</code>
|
|
{props.isCopyable && (
|
|
<button
|
|
className={cn(
|
|
'ml-1 p-1 rounded-md',
|
|
'bg-ui-100 dark:bg-ui-800',
|
|
'text-ui-500 dark:text-ui-400',
|
|
'inline-flex items-center justify-center'
|
|
)}
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(props.children.join(''))
|
|
toast('Copied to clipboard')
|
|
setIsCopied(true)
|
|
setTimeout(() => setIsCopied(false), 1000)
|
|
}}
|
|
>
|
|
{isCopied ?
|
|
<CheckIcon className="h-3 w-3" /> :
|
|
<CopyIcon className="h-3 w-3" />
|
|
}
|
|
</button>
|
|
)}
|
|
</>
|
|
)
|
|
}
|