Update CopyableCode.tsx

This commit is contained in:
MacRimi 2025-02-18 00:14:42 +01:00 committed by GitHub
parent 9f6cf2eb71
commit cef81ba22b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -28,9 +28,9 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }
<div className={cn("relative w-full", className)}> <div className={cn("relative w-full", className)}>
<pre <pre
className={cn( className={cn(
"bg-gray-100 p-2 rounded-md overflow-x-auto", "bg-gray-100 p-2 sm:p-3 md:p-4 rounded-md overflow-x-auto",
"text-sm", "text-xs sm:text-sm md:text-base",
"w-full min-w-[300px] max-w-full", "max-w-full",
language ? `language-${language}` : "", language ? `language-${language}` : "",
)} )}
> >
@ -38,14 +38,17 @@ const CopyableCode: React.FC<CopyableCodeProps> = ({ code, language, className }
</pre> </pre>
<button <button
onClick={copyToClipboard} onClick={copyToClipboard}
className="absolute top-1 right-1 p-1 bg-white rounded-md shadow-sm hover:bg-gray-100 transition-colors" 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" aria-label="Copy code"
> >
{isCopied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3 text-gray-500" />} {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" />
)}
</button> </button>
</div> </div>
) )
} }
export default CopyableCode export default CopyableCode