72 lines
2.2 KiB
JavaScript
72 lines
2.2 KiB
JavaScript
import { Dialog } from "@mui/material";
|
|
|
|
const ShareModal = ({ open, onClose, url }) => {
|
|
const handleCopy = () => {
|
|
navigator.clipboard.writeText(url);
|
|
};
|
|
|
|
return (
|
|
<Dialog
|
|
open={open}
|
|
onClose={onClose}
|
|
fullWidth
|
|
PaperProps={{
|
|
className: "rounded-2xl p-4"
|
|
}}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between mb-3">
|
|
<h2 className="text-lg font-semibold">Share Modal</h2>
|
|
<button onClick={onClose} className="text-gray-500">✕</button>
|
|
</div>
|
|
|
|
{/* Title */}
|
|
<p className="text-gray-600 text-sm mb-3">Share this link via</p>
|
|
|
|
{/* Social Icons */}
|
|
<div className="flex items-center gap-4 mb-5 justify-center">
|
|
<a href={`https://www.facebook.com/sharer/sharer.php?u=${url}`} target="_blank">
|
|
<img src="https://cdn-icons-png.flaticon.com/512/733/733547.png" className="w-10 h-10" />
|
|
</a>
|
|
|
|
<a href={`https://twitter.com/intent/tweet?url=${url}`} target="_blank">
|
|
<img src="https://cdn-icons-png.flaticon.com/512/733/733579.png" className="w-10 h-10" />
|
|
</a>
|
|
|
|
<a href={`https://www.instagram.com`} target="_blank">
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2111/2111463.png" className="w-10 h-10" />
|
|
</a>
|
|
|
|
<a href={`https://api.whatsapp.com/send?text=${url}`} target="_blank">
|
|
<img src="https://cdn-icons-png.flaticon.com/512/733/733585.png" className="w-10 h-10" />
|
|
</a>
|
|
|
|
<a href={`https://t.me/share/url?url=${url}`} target="_blank">
|
|
<img src="https://cdn-icons-png.flaticon.com/512/2111/2111646.png" className="w-10 h-10" />
|
|
</a>
|
|
</div>
|
|
|
|
{/* OR Copy link */}
|
|
<p className="text-gray-600 text-sm mb-2">Or copy link</p>
|
|
|
|
<div className="flex items-center gap-2 border rounded-xl p-2">
|
|
<span className="text-gray-500">🔗</span>
|
|
<input
|
|
type="text"
|
|
value={url}
|
|
readOnly
|
|
className="flex-1 outline-none text-sm"
|
|
/>
|
|
<button
|
|
onClick={handleCopy}
|
|
className="bg-purple-600 text-white px-3 py-1 rounded-lg text-sm"
|
|
>
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default ShareModal;
|