52 lines
1.2 KiB
TypeScript
52 lines
1.2 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={() => {
|
|
if (!props.children) {
|
|
throw new Error('Made copyable without children');
|
|
}
|
|
|
|
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>
|
|
) : undefined}
|
|
</>
|
|
);
|
|
}
|