feat: add copy full content button

This commit is contained in:
Zied
2026-02-25 11:19:01 +01:00
parent d1c70dccce
commit 7c4aa1c88b

View File

@@ -10,6 +10,7 @@ export function SkillDetail() {
const [content, setContent] = useState('');
const [loading, setLoading] = useState(true);
const [copied, setCopied] = useState(false);
const [copiedFull, setCopiedFull] = useState(false);
const [error, setError] = useState(null);
const [customContext, setCustomContext] = useState('');
@@ -61,6 +62,16 @@ export function SkillDetail() {
setTimeout(() => setCopied(false), 2000);
};
const copyFullToClipboard = () => {
const finalPrompt = customContext.trim()
? `${content}\n\nContext:\n${customContext}`
: content;
navigator.clipboard.writeText(finalPrompt);
setCopiedFull(true);
setTimeout(() => setCopiedFull(false), 2000);
};
if (loading) {
return (
<div className="flex items-center justify-center min-h-[50vh]">
@@ -109,13 +120,22 @@ export function SkillDetail() {
{skill.description}
</p>
</div>
<button
onClick={copyToClipboard}
className="flex items-center justify-center space-x-2 bg-slate-900 hover:bg-slate-800 text-white dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200 px-4 py-2.5 rounded-lg font-medium transition-colors min-w-[140px]"
>
{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
<span>{copied ? 'Copied!' : 'Copy Prompt'}</span>
</button>
<div className="flex flex-col sm:flex-row gap-2">
<button
onClick={copyToClipboard}
className="flex items-center justify-center space-x-2 bg-slate-100 hover:bg-slate-200 text-slate-900 dark:bg-slate-800 dark:text-slate-100 dark:hover:bg-slate-700 px-4 py-2.5 rounded-lg font-medium transition-colors min-w-[140px] border border-slate-200 dark:border-slate-700"
>
{copied ? <Check className="h-4 w-4 text-green-600 dark:text-green-400" /> : <Copy className="h-4 w-4" />}
<span>{copied ? 'Copied!' : 'Copy @Skill'}</span>
</button>
<button
onClick={copyFullToClipboard}
className="flex items-center justify-center space-x-2 bg-slate-900 hover:bg-slate-800 text-white dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-200 px-4 py-2.5 rounded-lg font-medium transition-colors min-w-[140px]"
>
{copiedFull ? <Check className="h-4 w-4 text-green-400" /> : <FileCode className="h-4 w-4" />}
<span>{copiedFull ? 'Copied Content!' : 'Copy Full Content'}</span>
</button>
</div>
</div>
<div className="mt-6 border-t border-slate-200 dark:border-slate-800 pt-6">