feat: Copy code MDX component

[omaralsoudanii]

• added a new component, copy button to use in code block, hidden by default and shown on hover, same behavior as github.
• CSS addition for rehype titles margin needed since the component wraps pre in a div

[vercel[bot]]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/leerob/leerob/7y8CJGYS1EX5t83y38VBVXYk2gA4
✅ Preview: https://leerob-git-fork-omaralsoudanii-copy-code-block-leerob1.vercel.app

[leerob]

• I think it might be better to always show copy, rather than have it appear on hover.
• It'd also be great to not show the button on mobile.
• I like the idea in the previous PR about changing into a check - ideally animated like the mobile menu here 😄

Thank you for helping!

[omaralsoudanii]

@leerob Sure thing, I'll grab the svg design from the other PR.

For the animation, gotta check how you did the menu.

Hidden or shown you can easily modify the state in the code, I will just remove the Hidden part, but keep in mind this is Hidden on mobile unless you click the div.

For both desktop and mobile it's usually Hidden because it might conflict with text, e.g: a 1 line text or code.

This is how most sites do it, check github.com from mobile and desktop 👍

[omaralsoudanii]

@Deep-Codes would you like to add your design? Replace the current svg used here

[omaralsoudanii]

Yo @leerob

Any thoughts about my comment? So it should it be always visible on desktop, always hidden on mobile?

One problem I see is that if you have a code block with one line it will cover the text, hence the hovering method (maybe you can find a sample from the preview link)

If that's okay, then I will remove the hovering and hide the button on mobile via tailwind.

Also not sure if this needs further modifications due to this https://github.com/leerob/leerob.io/pull/384

[leerob]

It'd say yes, always visible on desktop and always hidden on mobile.

To solve the text covering up, maybe we change the padding at the top potentially, or maybe a background gradient that fades or has lower opacity so you can still see the text.

[leerob]

There's a new design in https://github.com/leerob/leerob.io/pull/564 – I might revisit adding this. Thank you anyway, super appreciate it 🙏