513 lines
20 KiB
TypeScript
513 lines
20 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { X, Copy, Loader2 } from "lucide-react";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { toast } from "sonner";
|
||
|
|
import type { PeqEqUi } from "../constants";
|
||
|
|
|
||
|
|
type PeqItem = {
|
||
|
|
name: string;
|
||
|
|
brand?: string;
|
||
|
|
model?: string;
|
||
|
|
form?: string;
|
||
|
|
filters?: any[] | string;
|
||
|
|
autoPre?: number;
|
||
|
|
preamp?: number;
|
||
|
|
canDel?: number;
|
||
|
|
};
|
||
|
|
|
||
|
|
type PeqCardLabels = {
|
||
|
|
share: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
type ImportedEqData = {
|
||
|
|
name: string;
|
||
|
|
brand?: string;
|
||
|
|
model?: string;
|
||
|
|
form?: string;
|
||
|
|
filters?: any[] | string;
|
||
|
|
preamp?: number;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function ShareDialog({
|
||
|
|
open,
|
||
|
|
onClose,
|
||
|
|
peqItems,
|
||
|
|
headphoneIdx,
|
||
|
|
eqUi,
|
||
|
|
peqCardLabels,
|
||
|
|
onImportEq,
|
||
|
|
}: {
|
||
|
|
open: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
peqItems: PeqItem[];
|
||
|
|
headphoneIdx: number;
|
||
|
|
eqUi: PeqEqUi;
|
||
|
|
peqCardLabels: PeqCardLabels;
|
||
|
|
onImportEq: (data: ImportedEqData) => void;
|
||
|
|
}) {
|
||
|
|
const [shareDialogTab, setShareDialogTab] = useState<"share" | "import" | "myShares">("share");
|
||
|
|
const [shareSelectedIdx, setShareSelectedIdx] = useState<number>(headphoneIdx);
|
||
|
|
const [shareCode, setShareCode] = useState<string | null>(null);
|
||
|
|
const [shareGenerating, setShareGenerating] = useState(false);
|
||
|
|
const [importCodeInputs, setImportCodeInputs] = useState<string[]>(["", "", "", "", ""]);
|
||
|
|
const [importQuerying, setImportQuerying] = useState(false);
|
||
|
|
const [importedEqData, setImportedEqData] = useState<ImportedEqData | null>(null);
|
||
|
|
const [mySharesList, setMySharesList] = useState<Array<{ code: string; name: string }>>([]);
|
||
|
|
const [mySharesLoading, setMySharesLoading] = useState(false);
|
||
|
|
|
||
|
|
if (!open) return null;
|
||
|
|
|
||
|
|
/* ── clipboard helper ── */
|
||
|
|
const copyToClipboard = async (text: string) => {
|
||
|
|
try {
|
||
|
|
await navigator.clipboard.writeText(text);
|
||
|
|
toast.success(eqUi.shareCopied);
|
||
|
|
} catch {
|
||
|
|
const ta = document.createElement("textarea");
|
||
|
|
ta.value = text;
|
||
|
|
ta.style.position = "fixed";
|
||
|
|
ta.style.opacity = "0";
|
||
|
|
document.body.appendChild(ta);
|
||
|
|
ta.select();
|
||
|
|
document.execCommand("copy");
|
||
|
|
document.body.removeChild(ta);
|
||
|
|
toast.success(eqUi.shareCopied);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="fixed inset-0 z-[120] flex items-center justify-center bg-black/65 px-4"
|
||
|
|
onClick={onClose}
|
||
|
|
>
|
||
|
|
<div
|
||
|
|
className="w-full max-w-[420px] rounded-[14px] p-5"
|
||
|
|
style={{
|
||
|
|
background: "linear-gradient(180deg, rgba(34,36,40,0.98) 0%, rgba(24,26,30,0.98) 100%)",
|
||
|
|
border: "1px solid rgba(255,255,255,0.12)",
|
||
|
|
boxShadow: "0 18px 48px rgba(0,0,0,0.55)",
|
||
|
|
}}
|
||
|
|
onClick={(e) => e.stopPropagation()}
|
||
|
|
>
|
||
|
|
{/* header */}
|
||
|
|
<div className="flex items-center justify-between mb-4">
|
||
|
|
{/* tab bar */}
|
||
|
|
<div className="flex gap-1 rounded-[10px] p-1" style={{ background: "rgba(44,44,46,0.8)" }}>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className={cn(
|
||
|
|
"px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
|
||
|
|
shareDialogTab === "share"
|
||
|
|
? "bg-[#00FFF6] text-black font-semibold"
|
||
|
|
: "text-white/60 hover:text-white/80",
|
||
|
|
)}
|
||
|
|
onClick={() => setShareDialogTab("share")}
|
||
|
|
>
|
||
|
|
{peqCardLabels.share}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className={cn(
|
||
|
|
"px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
|
||
|
|
shareDialogTab === "import"
|
||
|
|
? "bg-[#00FFF6] text-black font-semibold"
|
||
|
|
: "text-white/60 hover:text-white/80",
|
||
|
|
)}
|
||
|
|
onClick={() => setShareDialogTab("import")}
|
||
|
|
>
|
||
|
|
{eqUi.importTab}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className={cn(
|
||
|
|
"px-3 py-1.5 rounded-[8px] text-[13px] font-medium transition-colors",
|
||
|
|
shareDialogTab === "myShares"
|
||
|
|
? "bg-[#00FFF6] text-black font-semibold"
|
||
|
|
: "text-white/60 hover:text-white/80",
|
||
|
|
)}
|
||
|
|
onClick={() => {
|
||
|
|
setShareDialogTab("myShares");
|
||
|
|
if (mySharesList.length === 0 && !mySharesLoading) {
|
||
|
|
void (async () => {
|
||
|
|
setMySharesLoading(true);
|
||
|
|
try {
|
||
|
|
// ── TODO: 伪代码 — 调用查询我的分享列表接口 ──
|
||
|
|
// const res = await fetch("/api/eq/share/list");
|
||
|
|
// if (!res.ok) {
|
||
|
|
// toast.error(eqUi.mySharesLoadFail);
|
||
|
|
// return;
|
||
|
|
// }
|
||
|
|
// const data = await res.json();
|
||
|
|
// setMySharesList(data.list);
|
||
|
|
|
||
|
|
// 模拟接口延迟
|
||
|
|
await new Promise((r) => setTimeout(r, 600));
|
||
|
|
// 模拟返回分享列表
|
||
|
|
setMySharesList([
|
||
|
|
{ code: "AK7NR", name: "Sennheiser HD 600 (AutoEQ)" },
|
||
|
|
{ code: "P3WQM", name: "Beyerdynamic DT 880" },
|
||
|
|
{ code: "Z5XKL", name: "Hifiman HE400i" },
|
||
|
|
]);
|
||
|
|
} catch {
|
||
|
|
// TODO: 错误处理
|
||
|
|
} finally {
|
||
|
|
setMySharesLoading(false);
|
||
|
|
}
|
||
|
|
})();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{eqUi.mySharesTab}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="rounded-full p-1.5 text-white/45 transition-colors hover:bg-white/10 hover:text-white/80"
|
||
|
|
onClick={onClose}
|
||
|
|
>
|
||
|
|
<X size={20} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* ── Tab: Share EQ ── */}
|
||
|
|
{shareDialogTab === "share" && (
|
||
|
|
<>
|
||
|
|
{/* hint */}
|
||
|
|
<p className="mb-3 text-[13px] leading-relaxed text-white/45">{eqUi.shareSelectHint}</p>
|
||
|
|
|
||
|
|
{/* EQ preset list */}
|
||
|
|
<div
|
||
|
|
className="rounded-[10px] overflow-hidden max-h-48 overflow-y-auto mb-4"
|
||
|
|
style={{
|
||
|
|
background: "rgba(10,12,16,0.98)",
|
||
|
|
border: "1px solid rgba(0,255,246,0.35)",
|
||
|
|
boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{peqItems.length === 0 && (
|
||
|
|
<div className="py-6 text-center text-[13px] text-white/30">—</div>
|
||
|
|
)}
|
||
|
|
{peqItems.map((item, idx) => {
|
||
|
|
const active = idx === shareSelectedIdx;
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={`${item.name}-${idx}`}
|
||
|
|
type="button"
|
||
|
|
className={`w-full px-3 py-2.5 text-left text-[13px] transition-colors truncate border-b border-white/[0.06] last:border-b-0 ${
|
||
|
|
active ? "text-black font-semibold" : "text-white/90 hover:bg-white/10"
|
||
|
|
}`}
|
||
|
|
style={active ? { background: "#00FFF6" } : undefined}
|
||
|
|
title={item.name}
|
||
|
|
onClick={() => setShareSelectedIdx(idx)}
|
||
|
|
>
|
||
|
|
{item.name}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* confirm button */}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
disabled={shareGenerating || peqItems.length === 0}
|
||
|
|
className={cn(
|
||
|
|
"w-full rounded-full py-2.5 text-[15px] font-semibold text-black transition-all active:scale-[0.98]",
|
||
|
|
shareGenerating || peqItems.length === 0
|
||
|
|
? "bg-[#00FFF6]/40 cursor-not-allowed"
|
||
|
|
: "bg-[#00FFF6] hover:brightness-95",
|
||
|
|
)}
|
||
|
|
onClick={async () => {
|
||
|
|
if (shareGenerating) return;
|
||
|
|
setShareGenerating(true);
|
||
|
|
setShareCode(null);
|
||
|
|
try {
|
||
|
|
// ── TODO: 伪代码 — 调用分享接口 ──
|
||
|
|
// const selectedPeq = peqItems[shareSelectedIdx];
|
||
|
|
// const res = await fetch("/api/eq/share", {
|
||
|
|
// method: "POST",
|
||
|
|
// headers: { "Content-Type": "application/json" },
|
||
|
|
// body: JSON.stringify({
|
||
|
|
// brand: selectedPeq.brand,
|
||
|
|
// model: selectedPeq.model,
|
||
|
|
// target: selectedPeq.form,
|
||
|
|
// filters: selectedPeq.filters,
|
||
|
|
// preamp: selectedPeq.preamp,
|
||
|
|
// }),
|
||
|
|
// });
|
||
|
|
// const data = await res.json();
|
||
|
|
// setShareCode(data.shareCode);
|
||
|
|
|
||
|
|
// 模拟接口延迟
|
||
|
|
await new Promise((r) => setTimeout(r, 800));
|
||
|
|
// 模拟返回 5 位随机分享码
|
||
|
|
const fakeCode = Array.from(
|
||
|
|
{ length: 5 },
|
||
|
|
() => "ABCDEFGHJKLMNPQRSTUVWXYZ23456789"[Math.floor(Math.random() * 32)],
|
||
|
|
).join("");
|
||
|
|
setShareCode(fakeCode);
|
||
|
|
} catch {
|
||
|
|
// TODO: 错误处理
|
||
|
|
} finally {
|
||
|
|
setShareGenerating(false);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{shareGenerating ? (
|
||
|
|
<span className="flex items-center justify-center gap-2">
|
||
|
|
<Loader2 size={16} className="animate-spin" />
|
||
|
|
{eqUi.shareGenerating}
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
eqUi.shareConfirm
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* share code display */}
|
||
|
|
{shareCode && (
|
||
|
|
<div className="mt-5">
|
||
|
|
<p className="mb-2 text-[12px] text-white/40 font-medium">{eqUi.shareCodeLabel}</p>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<div className="flex flex-1 gap-1.5 justify-center">
|
||
|
|
{shareCode.split("").map((ch, i) => (
|
||
|
|
<div
|
||
|
|
key={i}
|
||
|
|
className="w-11 h-12 rounded-[8px] flex items-center justify-center text-[18px] font-bold tracking-wider text-[#00FFF6]"
|
||
|
|
style={{
|
||
|
|
background: "rgba(0,255,246,0.08)",
|
||
|
|
border: "1px solid rgba(0,255,246,0.25)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{ch}
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="shrink-0 w-9 h-9 rounded-[8px] flex items-center justify-center text-[#00FFF6] active:scale-95 transition-transform"
|
||
|
|
style={{
|
||
|
|
background: "rgba(0,255,246,0.12)",
|
||
|
|
border: "1px solid rgba(0,255,246,0.25)",
|
||
|
|
}}
|
||
|
|
onClick={() => void copyToClipboard(shareCode)}
|
||
|
|
>
|
||
|
|
<Copy size={16} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* ── Tab: Import EQ ── */}
|
||
|
|
{shareDialogTab === "import" && (
|
||
|
|
<>
|
||
|
|
{/* hint */}
|
||
|
|
<p className="mb-3 text-[13px] leading-relaxed text-white/45">{eqUi.importCodeHint}</p>
|
||
|
|
|
||
|
|
{/* 5 input boxes */}
|
||
|
|
<div className="flex gap-2 justify-center mb-4">
|
||
|
|
{importCodeInputs.map((ch, i) => (
|
||
|
|
<input
|
||
|
|
key={i}
|
||
|
|
value={ch}
|
||
|
|
inputMode="text"
|
||
|
|
maxLength={1}
|
||
|
|
autoCapitalize="characters"
|
||
|
|
autoCorrect="off"
|
||
|
|
className="w-11 h-12 rounded-[8px] text-center text-[18px] font-bold tracking-wider text-[#00FFF6] bg-transparent outline-none uppercase"
|
||
|
|
style={{
|
||
|
|
background: "rgba(0,255,246,0.06)",
|
||
|
|
border: "1px solid rgba(0,255,246,0.25)",
|
||
|
|
caretColor: "#00FFF6",
|
||
|
|
}}
|
||
|
|
onChange={(e) => {
|
||
|
|
const val = e.target.value.replace(/[^a-zA-Z0-9]/g, "").slice(-1).toUpperCase();
|
||
|
|
const next = [...importCodeInputs];
|
||
|
|
next[i] = val;
|
||
|
|
setImportCodeInputs(next);
|
||
|
|
setImportedEqData(null);
|
||
|
|
// auto-focus next box
|
||
|
|
if (val && i < 4) {
|
||
|
|
const el = e.target.nextElementSibling as HTMLInputElement | null;
|
||
|
|
el?.focus();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onKeyDown={(e) => {
|
||
|
|
// backspace: clear current & focus previous
|
||
|
|
if (e.key === "Backspace" && !importCodeInputs[i] && i > 0) {
|
||
|
|
const next = [...importCodeInputs];
|
||
|
|
next[i - 1] = "";
|
||
|
|
setImportCodeInputs(next);
|
||
|
|
setImportedEqData(null);
|
||
|
|
const prev = (e.target as HTMLElement).previousElementSibling as HTMLInputElement | null;
|
||
|
|
prev?.focus();
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
onPaste={(e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
const text = (e.clipboardData.getData("text") || "").replace(/[^a-zA-Z0-9]/g, "").toUpperCase().slice(0, 5);
|
||
|
|
if (!text) return;
|
||
|
|
const next = [...importCodeInputs];
|
||
|
|
for (let j = 0; j < 5; j++) {
|
||
|
|
next[j] = text[j] ?? "";
|
||
|
|
}
|
||
|
|
setImportCodeInputs(next);
|
||
|
|
setImportedEqData(null);
|
||
|
|
// focus last filled or last box
|
||
|
|
const focusIdx = Math.min(text.length, 4);
|
||
|
|
const inputs = (e.target as HTMLElement).parentElement?.querySelectorAll("input");
|
||
|
|
(inputs?.[focusIdx] as HTMLInputElement | undefined)?.focus();
|
||
|
|
}}
|
||
|
|
ref={() => {
|
||
|
|
// stash ref for focus management if needed later
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* query button */}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
disabled={importQuerying || importCodeInputs.some((c) => !c)}
|
||
|
|
className={cn(
|
||
|
|
"w-full rounded-full py-2.5 text-[15px] font-semibold text-black transition-all active:scale-[0.98]",
|
||
|
|
importQuerying || importCodeInputs.some((c) => !c)
|
||
|
|
? "bg-[#00FFF6]/40 cursor-not-allowed"
|
||
|
|
: "bg-[#00FFF6] hover:brightness-95",
|
||
|
|
)}
|
||
|
|
onClick={async () => {
|
||
|
|
if (importQuerying) return;
|
||
|
|
const code = importCodeInputs.join("");
|
||
|
|
setImportQuerying(true);
|
||
|
|
setImportedEqData(null);
|
||
|
|
try {
|
||
|
|
// ── TODO: 伪代码 — 调用导入查询接口 ──
|
||
|
|
// const res = await fetch(`/api/eq/share/${code}`);
|
||
|
|
// if (!res.ok) {
|
||
|
|
// toast.error(eqUi.importCodeNotFound);
|
||
|
|
// return;
|
||
|
|
// }
|
||
|
|
// const data = await res.json();
|
||
|
|
// setImportedEqData({
|
||
|
|
// name: data.name,
|
||
|
|
// brand: data.brand,
|
||
|
|
// model: data.model,
|
||
|
|
// form: data.target,
|
||
|
|
// filters: data.filters,
|
||
|
|
// preamp: data.preamp,
|
||
|
|
// });
|
||
|
|
|
||
|
|
// 模拟接口延迟
|
||
|
|
await new Promise((r) => setTimeout(r, 600));
|
||
|
|
// 模拟返回 EQ 数据
|
||
|
|
setImportedEqData({
|
||
|
|
name: "Sennheiser HD 600 (AutoEQ)",
|
||
|
|
brand: "Sennheiser",
|
||
|
|
model: "HD 600",
|
||
|
|
form: "over-ear",
|
||
|
|
filters: [],
|
||
|
|
preamp: -5.2,
|
||
|
|
});
|
||
|
|
} catch {
|
||
|
|
// TODO: 错误处理
|
||
|
|
} finally {
|
||
|
|
setImportQuerying(false);
|
||
|
|
}
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{importQuerying ? (
|
||
|
|
<span className="flex items-center justify-center gap-2">
|
||
|
|
<Loader2 size={16} className="animate-spin" />
|
||
|
|
{eqUi.importQuerying}
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
eqUi.importQuery
|
||
|
|
)}
|
||
|
|
</button>
|
||
|
|
|
||
|
|
{/* imported EQ result */}
|
||
|
|
{importedEqData && (
|
||
|
|
<div className="mt-4 rounded-[10px] p-3" style={{ background: "rgba(0,255,246,0.06)", border: "1px solid rgba(0,255,246,0.2)" }}>
|
||
|
|
<div className="flex items-center justify-between">
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<p className="text-[12px] text-white/40 font-medium mb-0.5">{eqUi.importEqName}</p>
|
||
|
|
<p className="text-[14px] text-white/90 font-semibold truncate">{importedEqData.name}</p>
|
||
|
|
</div>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="shrink-0 ml-3 rounded-full px-4 py-2 text-[13px] font-semibold text-black bg-[#00FFF6] hover:brightness-95 active:scale-[0.98] transition-all"
|
||
|
|
onClick={() => {
|
||
|
|
// ── TODO: 伪代码 — 导入 EQ 到预设列表 ──
|
||
|
|
// onImportEq will handle the parent-level state changes
|
||
|
|
onImportEq(importedEqData);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{eqUi.importButton}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* ── Tab: My Shares ── */}
|
||
|
|
{shareDialogTab === "myShares" && (
|
||
|
|
<>
|
||
|
|
{mySharesLoading && mySharesList.length === 0 ? (
|
||
|
|
<div className="flex items-center justify-center py-10 gap-2 text-white/50">
|
||
|
|
<Loader2 size={16} className="animate-spin" />
|
||
|
|
<span className="text-[13px]">{eqUi.mySharesLoading}</span>
|
||
|
|
</div>
|
||
|
|
) : mySharesList.length === 0 ? (
|
||
|
|
<div className="py-10 text-center text-[13px] text-white/30">{eqUi.mySharesEmpty}</div>
|
||
|
|
) : (
|
||
|
|
<div
|
||
|
|
className="rounded-[10px] overflow-hidden max-h-64 overflow-y-auto"
|
||
|
|
style={{
|
||
|
|
background: "rgba(10,12,16,0.98)",
|
||
|
|
border: "1px solid rgba(0,255,246,0.35)",
|
||
|
|
boxShadow: "0 8px 20px rgba(0,0,0,0.45)",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{mySharesList.map((item, idx) => (
|
||
|
|
<div
|
||
|
|
key={`${item.code}-${idx}`}
|
||
|
|
className="flex items-center gap-3 px-3 py-2.5 border-b border-white/[0.06] last:border-b-0"
|
||
|
|
>
|
||
|
|
{/* share code */}
|
||
|
|
<div
|
||
|
|
className="shrink-0 flex gap-0.5"
|
||
|
|
title={eqUi.mySharesCode}
|
||
|
|
>
|
||
|
|
{item.code.split("").map((ch, ci) => (
|
||
|
|
<span
|
||
|
|
key={ci}
|
||
|
|
className="w-[18px] h-[22px] rounded-[4px] flex items-center justify-center text-[11px] font-bold text-[#00FFF6]"
|
||
|
|
style={{ background: "rgba(0,255,246,0.1)", border: "1px solid rgba(0,255,246,0.2)" }}
|
||
|
|
>
|
||
|
|
{ch}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
{/* EQ name */}
|
||
|
|
<div className="min-w-0 flex-1 truncate text-[13px] text-white/85">{item.name}</div>
|
||
|
|
{/* copy code button */}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="shrink-0 w-7 h-7 rounded-[6px] flex items-center justify-center text-[#00FFF6]/70 active:scale-95 transition-transform"
|
||
|
|
style={{ background: "rgba(0,255,246,0.08)", border: "1px solid rgba(0,255,246,0.15)" }}
|
||
|
|
onClick={() => void copyToClipboard(item.code)}
|
||
|
|
>
|
||
|
|
<Copy size={13} />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|