generated from theodorusclarence/ts-nextjs-tailwind-starter
-
-
Notifications
You must be signed in to change notification settings - Fork 60
/
CopyBox.tsx
40 lines (35 loc) · 1.19 KB
/
CopyBox.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
import * as React from 'react';
import CopyToClipboard from 'react-copy-to-clipboard';
import toast from 'react-hot-toast';
import { HiClipboard } from 'react-icons/hi';
import clsxm from '@/lib/clsxm';
import { trimHttps } from '@/lib/helper';
import PrimaryLink from '../components/links/PrimaryLink';
type CopyBoxProps = {
link: string;
} & React.ComponentPropsWithoutRef<'div'>;
export default function CopyBox({ className, link, ...rest }: CopyBoxProps) {
return (
<div
className={clsxm(
'flex max-w-sm items-center gap-2 rounded border border-gray-300 p-2 pl-4 dark:border-gray-600',
className
)}
{...rest}
>
<div className='flex-grow text-left'>
<PrimaryLink href={link} className='text-lg'>
{trimHttps(link)}
</PrimaryLink>
</div>
<CopyToClipboard
text={link}
onCopy={() => toast.success(`${trimHttps(link)} copied to clipboard`)}
>
<button className='rounded-full p-2 text-gray-600 hover:text-primary-400 focus:outline-none focus:ring focus:ring-primary-400 dark:text-white'>
<HiClipboard className='text-lg' />
</button>
</CopyToClipboard>
</div>
);
}