backerup-website/frontend/app/files/[token]/CopyLinkButton.tsx

"use client";

import { useState } from "react";
import { copyText } from "@/lib/clipboard";

export default function CopyLinkButton({ token }: { token: string }) {
  const [copied, setCopied] = useState(false);

  async function copy() {
    const url = `${window.location.origin}/files/${token}`;
    try {
      await copyText(url);
      setCopied(true);
      setTimeout(() => setCopied(false), 2500);
    } catch {
      // copy completely unavailable (e.g. sandboxed iframe) — do nothing
    }
  }

  return (
    <button
      onClick={copy}
      className={`flex w-full items-center justify-center gap-2.5 rounded-xl border py-3 text-sm font-semibold transition-all ${
        copied
          ? "border-emerald-500/40 bg-emerald-500/8 text-emerald-400"
          : "border-white/8 bg-white/3 text-slate-300 hover:bg-white/6 hover:border-white/16 hover:text-white"
      }`}
    >
      {copied ? (
        <>
          <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2.5" aria-hidden="true">
            <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
          </svg>
          Link copied!
        </>
      ) : (
        <>
          <svg viewBox="0 0 24 24" className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
            <path strokeLinecap="round" strokeLinejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
          </svg>
          Copy share link
        </>
      )}
    </button>
  );
}