r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2025-05-15 21:20:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Update code component
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 3m15s
Details

Browse Source
This commit is contained in:
Ryan Freeman 2025-05-13 21:45:46 +01:00
parent a2ee57a7ea
commit 90a4bce926
1 changed files with 5 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/ui/Code.tsx
View File

@ -8,19 +8,22 @@ import clsx from 'clsx'
export function Code({children}: { children: ReactNode }) { export function Code({children}: { children: ReactNode }) {
const [copied, setCopied] = useState<boolean>(false) const [copied, setCopied] = useState<boolean>(false)
const preRef = useRef<HTMLPreElement>(null) const preRef = useRef<HTMLPreElement>(null)
const buttonRef = useRef<HTMLButtonElement>(null)
const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => { const handleCopy = async (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault() e.preventDefault()
await navigator.clipboard.writeText(preRef.current?.innerText ?? '') await navigator.clipboard.writeText(preRef.current?.innerText ?? '')
setCopied(true) setCopied(true)
setTimeout(() => setCopied(false), 1000) setTimeout(() => setCopied(false), 1000)
buttonRef.current?.blur()
} }
return ( return (
<pre className="relative group" ref={preRef}> <pre className="relative group" ref={preRef}>
<button <button
className="absolute top-0 right-0 m-5 text-zinc-400 hover:text-zinc-50 focus:text-zinc-50 active:text-zinc-50" className="absolute top-0 right-0 m-5 text-zinc-400 hover:text-zinc-50"
onClick={handleCopy} aria-label="Copy code"> onClick={handleCopy} aria-label={`${!copied ? 'Copy this code' : 'Copied!'}`}
ref={buttonRef}>
<div className="relative size-6"> <div className="relative size-6">
<CheckIcon <CheckIcon
className={clsx('absolute text-green-500 ease-in transform transition', !copied ? 'scale-0' : 'scale-100')}/> className={clsx('absolute text-green-500 ease-in transform transition', !copied ? 'scale-0' : 'scale-100')}/>