1'use client'
2
3import clsx from 'clsx'
4import { useState } from 'react'
5
6import { Paragraph } from '../../atoms/paragraph/paragraph'
7import { CheckCircleIcon } from '@heroicons/react/20/solid'
8import { ClipboardDocumentIcon } from '@heroicons/react/24/outline'
9
10export const CopyCode = ({ code }: { code: string }) => {
11  const [copied, setCopied] = useState(false)
12  return (
13    <button
14      onClick={() => {
15        navigator.clipboard.writeText(code)
16        setCopied(true)
17        setTimeout(() => {
18          setCopied(false)
19        }, 2300)
20      }}
21      className='group relative mt-6 w-full rounded-lg border border-alpha-150 bg-neutral p-4 shadow-box transition-shadow hover:shadow-code md:w-11/12 md:p-10'
22    >
23      <div className='flex items-center gap-4 overflow-x-scroll text-left md:overflow-x-auto'>
24        <code className='bg-transparent text-base md:w-11/12 md:text-lg'>{code}</code>
25
26        <div className='absolute right-3 top-2 md:right-7 md:top-1/2 md:-translate-y-1/2'>
27          <ClipboardDocumentIcon className='h-6 w-6 transition-colors group-hover:text-primary' />
28        </div>
29      </div>
30
31      <div
32        className={clsx(
33          'absolute -bottom-7 right-0 flex items-center gap-1 font-semibold opacity-0 transition-opacity md:bottom-5 md:right-3 md:translate-y-1/2',
34          copied && 'opacity-100'
35        )}
36      >
37        <CheckCircleIcon className='h-6 w-6 text-primary' />
38        <Paragraph>Copied!</Paragraph>
39      </div>
40    </button>
41  )
42}
43

1'use client'
2
3import clsx from 'clsx'
4import { useState } from 'react'
5
6import { Paragraph } from '../../atoms/paragraph/paragraph'
7import { CheckCircleIcon } from '@heroicons/react/20/solid'
8import { ClipboardDocumentIcon } from '@heroicons/react/24/outline'
9
10export const CopyCode = ({ code }: { code: string }) => {
11  const [copied, setCopied] = useState(false)
12  return (
13    <button
14      onClick={() => {
15        navigator.clipboard.writeText(code)
16        setCopied(true)
17        setTimeout(() => {
18          setCopied(false)
19        }, 2300)
20      }}
21      className='group relative mt-6 w-full rounded-lg border border-alpha-150 bg-neutral p-4 shadow-box transition-shadow hover:shadow-code md:w-11/12 md:p-10'
22    >
23      <div className='flex items-center gap-4 overflow-x-scroll text-left md:overflow-x-auto'>
24        <code className='bg-transparent text-base md:w-11/12 md:text-lg'>{code}</code>
25
26        <div className='absolute right-3 top-2 md:right-7 md:top-1/2 md:-translate-y-1/2'>
27          <ClipboardDocumentIcon className='h-6 w-6 transition-colors group-hover:text-primary' />
28        </div>
29      </div>
30
31      <div
32        className={clsx(
33          'absolute -bottom-7 right-0 flex items-center gap-1 font-semibold opacity-0 transition-opacity md:bottom-5 md:right-3 md:translate-y-1/2',
34          copied && 'opacity-100'
35        )}
36      >
37        <CheckCircleIcon className='h-6 w-6 text-primary' />
38        <Paragraph>Copied!</Paragraph>
39      </div>
40    </button>
41  )
42}
43