Add copy button to code snippets

[mrkldshv]

Currently, it's not easy to copy code snippet from the example. When I'm trying to copy code by selecting it with mouse, this copies both the description and the code snippet. I think it would be great to add copy button to the code snippets. As alternative solution, we can adjust layout to make copying code using mouse easier.

[LeoDog896]

Does anyone have any ideas about where to place the copy to clipboard button per code block?

[lino-levan]

@LeoDog896 this would probably be done here

denobyexample/www/routes/[id].tsx

Line 223 in 2240ce9

function SnippetComponent(props: {

[LeoDog896]

Sorry about the bad wording -- more of a design question, but that helps too!

[lino-levan]

Ah okay, that makes more sense. I would place it in the top right of the box because that seems to be the standard.

See: https://vitejs.dev/guide/

[lino-levan]

I think this requires some design work. @hashrock (sorry for the ping), are you aware of a deno-style copy svg? I wasn't able to find any official deno projects with a copy button.

[hashrock]

I think we can use this svg:

https://github.com/denoland/doc_components/blob/main/icons.tsx#L91