48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
|
|
export default function CopyReferralButton({ value }: { value: string }) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
async function copy() {
|
|
const absolute =
|
|
typeof window !== "undefined" && value.startsWith("/")
|
|
? `${window.location.origin}${value}`
|
|
: value;
|
|
try {
|
|
await navigator.clipboard.writeText(absolute);
|
|
} catch {
|
|
const ta = document.createElement("textarea");
|
|
ta.value = absolute;
|
|
ta.style.position = "fixed";
|
|
ta.style.opacity = "0";
|
|
document.body.appendChild(ta);
|
|
ta.select();
|
|
try {
|
|
document.execCommand("copy");
|
|
} catch {
|
|
/* give up silently */
|
|
}
|
|
document.body.removeChild(ta);
|
|
}
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
}
|
|
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={copy}
|
|
className="rounded-xl font-bold text-sm px-5 py-2.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shrink-0"
|
|
style={{
|
|
background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
|
|
color: "var(--color-primary-readable, var(--color-primary))",
|
|
border: `2px solid color-mix(in srgb, var(--color-primary) 20%, transparent)`,
|
|
}}
|
|
>
|
|
{copied ? "Copied!" : "Copy link"}
|
|
</button>
|
|
);
|
|
}
|