Sebastian Krüger
4927fb9a93
- FaviconGenerator: lg:grid-cols-5 layout (2/5 setup, 3/5 results); glass panels, native inputs, custom tab switcher (Icons/HTML/Manifest), native progress bar, empty state placeholder, mobile Setup|Results tabs - FaviconFileUpload: remove shadcn Button; match media FileUpload styling with file card, metadata chips (size, dimensions) - CodeSnippet: remove shadcn Button; dark terminal (#06060e) with hover copy button, consistent with ASCII/ExportMenu code blocks Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Copy, Check } from 'lucide-react';
|
|
import { toast } from 'sonner';
|
|
|
|
interface CodeSnippetProps {
|
|
code: string;
|
|
}
|
|
|
|
export function CodeSnippet({ code }: CodeSnippetProps) {
|
|
const [copied, setCopied] = React.useState(false);
|
|
|
|
const handleCopy = () => {
|
|
navigator.clipboard.writeText(code);
|
|
setCopied(true);
|
|
toast.success('Copied to clipboard');
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<div className="relative group rounded-xl overflow-hidden border border-white/5" style={{ background: '#06060e' }}>
|
|
<button
|
|
onClick={handleCopy}
|
|
className="absolute right-3 top-3 opacity-0 group-hover:opacity-100 flex items-center gap-1 px-2 py-1 text-[10px] font-mono rounded-md border border-white/10 bg-white/5 text-white/40 hover:text-white/70 hover:border-white/20 transition-all"
|
|
>
|
|
{copied ? <Check className="w-2.5 h-2.5" /> : <Copy className="w-2.5 h-2.5" />}
|
|
{copied ? 'Copied' : 'Copy'}
|
|
</button>
|
|
<pre className="p-4 overflow-x-auto font-mono text-[11px] text-white/55 leading-relaxed">
|
|
<code>{code}</code>
|
|
</pre>
|
|
</div>
|
|
);
|
|
}
|