Feedback Request Before PR: Copy Code Feature for V3-Beta Website Template Code Blocks

[MotorcycleEnjoyer]

A copy-code button would be a nice QOL improvement for Code Blocks inside of the Website Template.
I made this for myself already, but I think a copy-code button belongs in the template out of the box.
Any feedback and discussion would be much appreciated.

'use client'
// new file
// src/blocks/Code/CopyButton/Component.client.tsx

import { Button } from '@/components/ui/button'
import Image from 'next/image'
import { useState } from 'react'

export default function CopyButton({ code }: { code: string }) {
  const [text, setText] = useState('Copy')

  function updateCopyStatus() {
    if (text === 'Copy') {
      setText(() => 'Copied!')
      setTimeout(() => {
        setText(() => 'Copy')
      }, 1000)
    }
  }

  return (
    <div className="flex justify-end align-middle">
      <Button
        className="flex gap-2 rounded-none"
        variant={'secondary'}
        onClick={async () => {
          await navigator.clipboard.writeText(code)
          updateCopyStatus()
        }}
      >
        <p>{text}</p>
        <Image width={16} height={16} src="/copy-icon.svg" alt="copy" className="dark:invert" />
      </Button>
    </div>
  )
}

'use client'
// modified existing file
// src/blocks/Code/Component.client.tsx

import { Highlight, themes } from 'prism-react-renderer'
import React from 'react'
import CopyButton from './CopyButton/Component.client'

type Props = {
  code: string
  language?: string
}

export const Code: React.FC<Props> = ({ code, language = '' }) => {
  if (!code) return null

  return (
    <Highlight code={code} language={language} theme={themes.vsDark}>
      {({ getLineProps, getTokenProps, tokens }) => (
        <pre className="overflow-x-auto rounded border border-border bg-black p-4 text-xs">
          {tokens.map((line, i) => (
            <div key={i} {...getLineProps({ className: 'table-row', line })}>
              <span className="table-cell select-none text-right text-white/25">{i + 1}</span>
              <span className="table-cell pl-4 pt-3">
                {line.map((token, key) => (
                  <span key={key} {...getTokenProps({ token })} />
                ))}
              </span>
            </div>
          ))}
          <CopyButton code={code} />
        </pre>
      )}
    </Highlight>
  )
}

Dark Mode before click

Dark Mode after click

Light Mode before click

Light Mode after click

The source of the SVG:
https://uxwing.com/copy-icon/

[MotorcycleEnjoyer]

Moved to PR: #8794