feat(templates): add a copy button to website template code blocks (#…

…8794)

## WHAT
- Adds a copy code button to the Code Blocks in V3 Beta Website
Template.
- Uses the existing button from `@/components/ui/button`
- SVG from this website: https://uxwing.com/copy-icon/


https://github.com/user-attachments/assets/2f6e720a-de37-40b5-a3bf-c748a69502b5

## WHY
- Copy-Code button is convenient for users looking at code blocks in
tutorials/documentation/etc

## ISSUES
- Button color invert isn't immediate on refresh in darkmode


https://github.com/user-attachments/assets/f1093a27-73dd-47cb-8fc9-2f4bc301b80c

templates/website/src/blocks/Code/Component.client.tsx

@@ -1,6 +1,7 @@
 'use client'
 import { Highlight, themes } from 'prism-react-renderer'
 import React from 'react'
+import { CopyButton } from './CopyButton'
 
 type Props = {
   code: string
@@ -24,6 +25,7 @@ export const Code: React.FC<Props> = ({ code, language = '' }) => {
               </span>
             </div>
           ))}
+          <CopyButton code={code} />
         </pre>
       )}
     </Highlight>

templates/website/src/blocks/Code/CopyButton.tsx

@@ -0,0 +1,36 @@
+'use client'
+import { Button } from '@/components/ui/button'
+import { CopyIcon } from '@payloadcms/ui'
+import { useState } from 'react'
+
+export 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-1"
+        variant={'secondary'}
+        onClick={async () => {
+          await navigator.clipboard.writeText(code)
+          updateCopyStatus()
+        }}
+      >
+        <p>{text}</p>
+
+        <div className="w-6 h-6 dark:invert">
+          <CopyIcon />
+        </div>
+      </Button>
+    </div>
+  )
+}