spb/wp-spboucher-ai

1"use client";2import { useState } from "react";3import { Check, Copy, Download, Link2, Quote } from "lucide-react";4import { t, type Locale } from "@/lib/i18n";5export function CiteMenu({ locale, slug, apa, chicago, shareUrl }: { locale: Locale; slug: string; apa: string; chicago: string; shareUrl: string }) {6  const d = t(locale); const [copied, setCopied] = useState<string | null>(null); const [open, setOpen] = useState(false);7  const copy = async (key: string, text: string) => { try { await navigator.clipboard.writeText(text); setCopied(key); setTimeout(() => setCopied(null), 1800); } catch { /* clipboard unavailable */ } };8  return (9    <div className="relative">10      <button type="button" className="btn" aria-expanded={open} aria-haspopup="dialog" onClick={() => setOpen((o) => !o)}><Quote size={16} aria-hidden /> {d.paper.cite}</button>11      {open && (12        <div role="dialog" aria-label={d.paper.cite} className="absolute z-30 mt-2 w-[min(92vw,34rem)] card p-4 text-sm left-0 sm:left-auto">13          <p className="label mb-1">APA</p><p className="text-fg-2 leading-relaxed">{apa}</p>14          <p className="label mt-3 mb-1">Chicago</p><p className="text-fg-2 leading-relaxed">{chicago}</p>15          <div className="mt-3 flex flex-wrap gap-2">16            <button type="button" className="btn btn-sm" onClick={() => copy("apa", apa)}>{copied === "apa" ? <Check size={14} aria-hidden /> : <Copy size={14} aria-hidden />} {d.paper.copyCitation}</button>17            <a className="btn btn-sm no-underline" href={`/api/v1/papers/${slug}/citation.bib`} download><Download size={14} aria-hidden /> {d.paper.bibtex}</a>18            <a className="btn btn-sm no-underline" href={`/api/v1/papers/${slug}/citation.ris`} download><Download size={14} aria-hidden /> {d.paper.ris}</a>19            <button type="button" className="btn btn-sm" onClick={() => copy("url", shareUrl)}>{copied === "url" ? <Check size={14} aria-hidden /> : <Link2 size={14} aria-hidden />} {copied === "url" ? d.paper.copied : d.paper.share}</button>20          </div>21        </div>22      )}23    </div>24  );25}26