Mirrors/ProxMenux
1
0
Fork 0
mirror of https://github.com/MacRimi/ProxMenux.git synced 2025-08-12 16:12:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update CopyableCode.tsx

Browse Source
This commit is contained in:
MacRimi 2025-02-18 00:50:41 +01:00 committed by GitHub
parent feb4951e1b
commit 0f4f4195bd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 11 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
web/components/CopyableCode.tsx
View File

@ -3,20 +3,17 @@
import type React from "react"
import { useState } from "react"
import { Copy, Check } from "lucide-react"
import { cn } from "@/lib/utils"
interface CopyableCodeProps {
code: string
language?: string
className?: string
}
const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }) => {
const CopyableCode: React.FC<CopyableCodeProps> = ({ code }) => {
const [isCopied, setIsCopied] = useState(false)
const copyToClipboard = async () => {
try {
await navigator.clipboard.writeText(decodeURIComponent(code))
await navigator.clipboard.writeText(code)
setIsCopied(true)
setTimeout(() => setIsCopied(false), 2000)
} catch (err) {
@ -25,30 +22,22 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }
}
return (
<div className={cn("relative w-full", className)}>
<pre
className={cn(
"bg-gray-100 p-2 sm:p-3 md:p-4 rounded-md overflow-x-auto",
"text-xs sm:text-sm md:text-base",
"max-w-full",
language ? `language-${language}` : "",
)}
>
<code className="whitespace-pre">{decodeURIComponent(code)}</code>
<div className="relative my-4">
<pre className="bg-gray-100 text-gray-800 p-4 rounded-md overflow-x-auto">
<code className="text-sm">{code}</code>
</pre>
<button
onClick={copyToClipboard}
className="absolute top-1 right-1 sm:top-2 sm:right-2 p-1 sm:p-2 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors"
aria-label="Copy code"
className="absolute top-2 right-2 p-2 bg-white rounded-md shadow-sm hover:bg-gray-200 transition-colors"
aria-label="Copy to clipboard"
>
{isCopied ? (
<Check className="h-3 w-3 sm:h-4 sm:w-4 text-green-500" />
) : (
<Copy className="h-3 w-3 sm:h-4 sm:w-4 text-gray-500" />
)}
{isCopied ? <Check className="h-5 w-5 text-green-500" /> : <Copy className="h-5 w-5 text-gray-500" />}
</button>
</div>
)
}
export default CopyableCode