o2o-triple-pick/components/ShareButton.tsx

44 lines
1.1 KiB
TypeScript

"use client";
import { useState } from "react";
// 투표(경기) 공유 — 모바일 네이티브 공유(invoke), 미지원 시 클립보드 복사 폴백 (D8)
export default function ShareButton({
url,
title,
text,
}: {
url: string;
title: string;
text: string;
}) {
const [copied, setCopied] = useState(false);
const onShare = async () => {
if (typeof navigator !== "undefined" && navigator.share) {
try {
await navigator.share({ title, text, url });
return;
} catch {
/* 사용자 취소 */
}
}
try {
await navigator.clipboard.writeText(`${text}\n${url}`);
setCopied(true);
setTimeout(() => setCopied(false), 1800);
} catch {
/* noop */
}
};
return (
<button
onClick={onShare}
className="flex items-center rounded-full border border-[var(--share)]/55 bg-[var(--share)]/12 px-3 py-1.5 text-[12px] font-bold text-[var(--share)] transition active:scale-95"
>
{copied ? "링크 복사됨 ✓" : "투표 공유하기"}
</button>
);
}