simone
c1ff5a7e67
- /admin/clients replica design-reference/pagina-clienti (dual light/dark via token) - ClientRow: colonne numeriche font-mono right-aligned, incassato come pill emerald, cella "Link profilo" con pill mono troncata + CopyLinkButton - nuovo primitivo CopyLinkButton (copia URL assoluto, feedback check emerald) - PageHeader con sottotitolo + footer conteggio clienti - DESIGN-SYSTEM.md: inventory (CopyLinkButton, ClientRow) + note pagina Clienti Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
35 lines
1.3 KiB
TypeScript
35 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export function CopyLinkButton({ path, title = "Copia link" }: { path: string; title?: string }) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
function handleCopy() {
|
|
const url = typeof window !== "undefined" ? `${window.location.origin}${path}` : path;
|
|
navigator.clipboard?.writeText(url).then(() => {
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 1500);
|
|
});
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={handleCopy}
|
|
title={copied ? "Copiato!" : title}
|
|
className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted transition-colors"
|
|
>
|
|
{copied ? (
|
|
<svg className="w-4 h-4 text-emerald-600 dark:text-emerald-400" fill="none" stroke="currentColor" strokeWidth={2} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
|
|
</svg>
|
|
) : (
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth={1.8} viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M8 5H6a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2v-1M8 5a2 2 0 002 2h2a2 2 0 002-2M8 5a2 2 0 012-2h2a2 2 0 012 2m0 0h2a2 2 0 012 2v3m2 4H10m0 0l3-3m-3 3l3 3" />
|
|
</svg>
|
|
)}
|
|
</button>
|
|
);
|
|
}
|