r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2025-04-19 11:34:46 +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 3m10s
Details

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

12
components/ui/Code.tsx
View File

@ -1,8 +1,8 @@
'use client'
import React, {ReactNode, useRef, useState} from 'react'
import {CopyIcon} from '@/components/icons/CopyIcon'
import {CheckIcon} from '@/components/icons/CheckIcon'
import {CopyIcon} from '@/components/icons/CopyIcon'
export function Code({children}: { children: ReactNode }) {
const [copied, setCopied] = useState<boolean>(false)
@ -16,10 +16,12 @@ export function Code({children}: { children: ReactNode }) {
}
return (
<pre className="relative" ref={preRef}>
<button className="absolute top-0 right-0 m-5" onClick={handleCopy} aria-label="Copy code">
{copied ? <CheckIcon className="size-6 text-green-500"/> :
<CopyIcon className="size-6 text-zinc-400 hover:text-zinc-50"/>}
<pre className="relative group" ref={preRef}>
<button
className="absolute top-0 right-0 m-5 group-hover:opacity-100 opacity-0 transition-opacity ease-in delay-100 bg-[#121212] p-2 rounded-lg border-[1px] border-zinc-700/40"
onClick={handleCopy} aria-label="Copy code">
{copied ? <CheckIcon className="size-5 text-green-500"/> :
<CopyIcon className="size-5 text-zinc-400 hover:text-zinc-50"/>}
</button>
<div className="mt-5 sm:mt-0 pb-5 overflow-auto ">
{children}