"use client"; import * as React from "react"; import { Dialog as DialogPrimitive } from "radix-ui"; import { AnimatePresence, motion } from "motion/react"; import { cn } from "@kineticui/core"; import { CheckIcon, CopyIcon, MailIcon, XIcon } from "@kineticui/icons"; import { QrCode } from "./qr-code"; import { SocialIcon } from "./social-icons"; export type ShareSheetProps = { url: string; title: string; text?: string; /** The element that opens the sheet. */ trigger: React.ReactElement; /** Who can open the link, shown with a selector. */ access?: { value: string; options: { value: string; label: string; description?: string }[]; onChange: (v: string) => void }; }; const targets = (url: string, title: string, text = "") => { const u = encodeURIComponent(url); const t = encodeURIComponent(title); return [ { id: "x", label: "X", href: `https://x.com/intent/tweet?url=${u}&text=${t}`, icon: }, { id: "linkedin", label: "LinkedIn", href: `https://www.linkedin.com/sharing/share-offsite/?url=${u}`, icon: }, { id: "whatsapp", label: "WhatsApp", href: `https://wa.me/?text=${t}%20${u}`, icon: }, { id: "telegram", label: "Telegram", href: `https://t.me/share/url?url=${u}&text=${t}`, icon: }, { id: "email", label: "Email", href: `mailto:?subject=${t}&body=${encodeURIComponent(text ? `${text}\n\n` : "")}${u}`, icon: }, ]; }; /** Share dialog: copy link, QR code, social targets, native share and link access settings. */ export function ShareSheet({ url, title, text, trigger, access }: ShareSheetProps) { const [copied, setCopied] = React.useState(false); const [qr, setQr] = React.useState(false); const canNative = typeof navigator !== "undefined" && "share" in navigator; return ( !o && setQr(false)}> {trigger}

Share {title}

{url}

{targets(url, title, text).map((t) => ( {t.icon} {t.label} ))}

{canNative ? ( ) : null}

{qr ? (

) : null} {access ? (

General access {access.options.map((o) => ( access.onChange(o.value)} className="accent-[var(--kn-accent)]" /> {o.label} {o.description ? {o.description} : null} ))}

) : null} ); }

Share Sheet

Installation

Exports