ShareDialog

1"use client";
2
3import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
4import { Button } from "@/components/ui/button";
5import { Input } from "@/components/ui/input";
6import { Twitter, Facebook, Linkedin, Reddit, Mail, MessageCircle, Copy, QrCode } from "lucide-react";
7import { useState } from "react";
8
9export default function ShareDialog() {
10  const [copied, setCopied] = useState(false);
11  const shareUrl = "https://example.com/page/123";
12
13  const handleCopy = () => {
14    navigator.clipboard.writeText(shareUrl);
15    setCopied(true);
16    setTimeout(() => setCopied(false), 2000);
17  };
18
19  const platforms = [
20    { name: "Twitter", icon: Twitter, color: "hover:bg-blue-50 hover:text-blue-600" },
21    { name: "Facebook", icon: Facebook, color: "hover:bg-blue-50 hover:text-blue-700" },
22    { name: "LinkedIn", icon: Linkedin, color: "hover:bg-blue-50 hover:text-blue-800" },
23    { name: "Reddit", icon: Reddit, color: "hover:bg-orange-50 hover:text-orange-600" },
24    { name: "Email", icon: Mail, color: "hover:bg-gray-50 hover:text-gray-600" },
25    { name: "WhatsApp", icon: MessageCircle, color: "hover:bg-green-50 hover:text-green-600" },
26  ];
27
28  return (
29    <Dialog open={true}>
30      <DialogContent className="sm:max-w-md">
31        <DialogHeader>
32          <DialogTitle>Share this page</DialogTitle>
33        </DialogHeader>
34        <div className="space-y-4">
35          <div className="grid grid-cols-3 gap-2">
36            {platforms.map((platform) => (
37              <Button
38                key={platform.name}
39                variant="outline"
40                className={`flex flex-col gap-2 h-20 ${platform.color}`}
41              >
42                <platform.icon className="w-5 h-5" />
43                <span className="text-xs">{platform.name}</span>
44              </Button>
45            ))}
46          </div>
47          <div className="space-y-2">
48            <label className="text-sm font-medium">Copy link</label>
49            <div className="flex gap-2">
50              <Input value={shareUrl} readOnly className="flex-1" />
51              <Button onClick={handleCopy} variant="outline" className="gap-2">
52                <Copy className="w-4 h-4" />
53                {copied ? "Copied!" : "Copy"}
54              </Button>
55            </div>
56          </div>
57          <div className="border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center gap-2 text-muted-foreground">
58            <QrCode className="w-12 h-12" />
59            <span className="text-sm">QR Code</span>
60          </div>
61        </div>
62      </DialogContent>
63    </Dialog>
64  );
65}