feat: add button to copy to clipboard

[guilherssousa]

The website has some big gist files that make the process of selecting to the very end and copying using shortcuts very long, so I implemented a button that copies the raw content of a page to the clipboard.

This PR also makes the CodePreview component client-side rendered.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated
fala-dev	✅ Ready (Inspect)	Visit Preview	💬 Add your feedback	Feb 8, 2023 at 11:23AM (UTC)

[diego3g]

It still look too dark to me. I have the feeling the button is disabled.

Also, look at this suggestion around the colors and also using data attribute to add tailwind styles based on the boolean state:

I've also set a fixed width to the button text so it won't change it's width based on the text size, what do you think?

<button
  onClick={handleCopyToClipboard}
  data-copied={hasCopiedToClipboard}
  className="absolute flex items-center right-0 mx-8 gap-x-2 text-sm font-medium z-30 bg-[#2a273f] px-3 py-2 rounded-md text-[#E0DEF2] ring-2 ring-[#2b283b] data-[copied=true]:ring-emerald-600"
>
  {hasCopiedToClipboard ? (
    <>
      <CheckIcon size={16} className="text-emerald-400" />
      <span className="w-32">Copied!</span>
    </>
  ): (
    <>
      <CopyIcon size={16} />
      <span className="w-32">Copy to Clipboard</span>
    </>
  )}
</button>

[guilherssousa]

Looks great to me, avoids using ternary ifs or external libraries, nice hack :)

[diego3g]

@guilherssousa That's awesome! Can you please add the changes on this PR so we can merge it?

[guilherssousa]

@guilherssousa That's awesome! Can you please add the changes on this PR so we can merge it?

Done :)