34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { useState } from "react"
|
|
import { Check, Link2 } from "lucide-react"
|
|
import { shortId } from "../../lib/routes"
|
|
|
|
/**
|
|
* Shows a short id and copies the full permalink (origin + `path`) on click,
|
|
* so any issue, pattern, session or error can be referenced in a message.
|
|
* The full id is in the tooltip and in the copied URL.
|
|
*/
|
|
export const CopyRef = ({ id, path, label = "Copy link" }: { id: string; path: string; label?: string }) => {
|
|
const [copied, setCopied] = useState(false)
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={(e) => {
|
|
e.stopPropagation()
|
|
void navigator.clipboard
|
|
.writeText(window.location.origin + path)
|
|
.then(() => {
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 1200)
|
|
})
|
|
.catch(() => undefined)
|
|
}}
|
|
title={`${label}: ${id}`}
|
|
aria-label={`${label} for ${id}`}
|
|
className="inline-flex h-[23px] shrink-0 items-center gap-1 rounded-[6px] border border-ds-line px-1.5 font-[family-name:var(--font-data)] text-[10.5px] text-ds-text-3 hover:border-ds-line-strong hover:text-ds-text-2"
|
|
>
|
|
{copied ? <Check className="h-3 w-3 text-ds-ok" aria-hidden="true" /> : <Link2 className="h-3 w-3" aria-hidden="true" />}
|
|
{copied ? "copied" : shortId(id)}
|
|
</button>
|
|
)
|
|
}
|