r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2025-04-22 10:14:35 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add animation to code component
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 3m9s
Details

Browse Source
This commit is contained in:
Ryan Freeman 2025-04-16 22:22:12 +01:00
parent 00f14b919a
commit 0bd57ee508
1 changed files with 12 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/ui/Code.tsx
View File

@ -1,8 +1,9 @@
'use client' 'use client'
import React, {ReactNode, useRef, useState} from 'react' import React, {ReactNode, useRef, useState} from 'react'
import {CopyIcon} from '@/components/icons/CopyIcon'
import {CheckIcon} from '@/components/icons/CheckIcon' import {CheckIcon} from '@/components/icons/CheckIcon'
import {CopyIcon} from '@/components/icons/CopyIcon'
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)
@ -16,10 +17,16 @@ export function Code({children}: { children: ReactNode }) {
} }
return ( return (
<pre className="relative" ref={preRef}> <pre className="relative group" ref={preRef}>
<button className="absolute top-0 right-0 m-5" onClick={handleCopy} aria-label="Copy code"> <button
{copied ? <CheckIcon className="size-6 text-green-500"/> : className="absolute top-0 right-0 m-5 scale-0 group-hover:scale-100 group-hover:opacity-100 opacity-0 transition-all ease-in p-2"
<CopyIcon className="size-6 text-zinc-400 hover:text-zinc-50"/>} onClick={handleCopy} aria-label="Copy code">
<div className="relative size-6">
<CheckIcon
className={clsx('absolute text-green-500 ease-in transform transition', !copied ? 'scale-0' : 'scale-100')}/>
<CopyIcon
className={clsx('absolute text-zinc-400 hover:text-zinc-50 ease-in transform transition', !copied ? 'scale-100' : 'scale-0')}/>
</div>
</button> </button>
<div className="mt-5 sm:mt-0 pb-5 overflow-auto "> <div className="mt-5 sm:mt-0 pb-5 overflow-auto ">
{children} {children}