3d381944d2
Next.js + Express event management app for Hope Family Church.
49 lines
1.8 KiB
TypeScript
49 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { Share2, QrCode } from "lucide-react";
|
|
import QRCode from "qrcode";
|
|
|
|
export default function ClientActions({ event }: { event: any }) {
|
|
return (
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
await navigator.share({
|
|
title: event.title,
|
|
text: event.description,
|
|
url: window.location.href,
|
|
});
|
|
} catch (err) {
|
|
console.error("Error sharing:", err);
|
|
}
|
|
}}
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded hover:bg-gray-200"
|
|
>
|
|
<Share2 className="w-4 h-4" />
|
|
Share
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
const url = window.location.href;
|
|
const qrDataUrl = await QRCode.toDataURL(url);
|
|
const link = document.createElement("a");
|
|
link.href = qrDataUrl;
|
|
link.download = `${event.title}-qr.png`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
} catch (err) {
|
|
console.error("Error generating QR code:", err);
|
|
}
|
|
}}
|
|
className="flex items-center gap-2 px-4 py-2 bg-gray-100 rounded hover:bg-gray-200"
|
|
>
|
|
<QrCode className="w-4 h-4" />
|
|
Save QR
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|