{"version":1,"id":"invite-team","framework":"next","kind":"block","files":[{"path":"src/blocks/gfa/invite-team.tsx","content":"\"use client\";\n\nimport { useEffect, useId, useRef, useState } from \"react\";\nimport { AnimatePresence, LayoutGroup, motion, useReducedMotion } from \"motion/react\";\nimport { Check, ChevronDown, Copy, Link2, X } from \"lucide-react\";\nimport { SPRING_PANEL, SPRING_SWAP } from \"@/lib/ease\";\nimport { cn } from \"@/lib/utils\";\n\nexport type InviteRole = \"admin\" | \"member\" | \"viewer\";\n\nexport type PendingInvite = {\n id: string;\n email: string;\n role: InviteRole;\n};\n\nexport type InviteTeamProps = {\n inviteLink?: string;\n initialPending?: PendingInvite[];\n className?: string;\n onInvite?: (emails: string[], role: InviteRole) => void;\n onClose?: () => void;\n};\n\nconst ROLES: { id: InviteRole; label: string; hint: string }[] = [\n { id: \"admin\", label: \"Admin\", hint: \"Can manage members and settings\" },\n { id: \"member\", label: \"Member\", hint: \"Can use the workspace\" },\n { id: \"viewer\", label: \"Viewer\", hint: \"Can view, not edit\" },\n];\n\nconst DEFAULT_PENDING: PendingInvite[] = [\n { id: \"1\", email: \"ada@example.com\", role: \"member\" },\n { id: \"2\", email: \"lin@studio.dev\", role: \"viewer\" },\n];\n\nconst EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/;\n\nfunction roleMeta(role: InviteRole) {\n return ROLES.find((r) => r.id === role) ?? ROLES[1]!;\n}\n\nfunction initials(email: string) {\n const local = email.split(\"@\")[0] ?? \"?\";\n const parts = local.split(/[._-]+/).filter(Boolean);\n if (parts.length >= 2) {\n return `${parts[0]![0] ?? \"\"}${parts[1]![0] ?? \"\"}`.toUpperCase();\n }\n return local.slice(0, 2).toUpperCase();\n}\n\nexport function InviteTeam({\n inviteLink = \"https://gfa.app/invite/team-7k2m\",\n initialPending = DEFAULT_PENDING,\n className,\n onInvite,\n onClose,\n}: InviteTeamProps) {\n const reduce = useReducedMotion();\n const roleListId = useId();\n const roleRootRef = useRef(null);\n const [emails, setEmails] = useState([]);\n const [draft, setDraft] = useState(\"\");\n const [role, setRole] = useState(\"member\");\n const [roleOpen, setRoleOpen] = useState(false);\n const [pending, setPending] = useState(initialPending);\n const [error, setError] = useState(null);\n const [copied, setCopied] = useState(false);\n const [sentFlash, setSentFlash] = useState(false);\n\n useEffect(() => {\n if (!roleOpen) return;\n const onDoc = (e: MouseEvent) => {\n if (roleRootRef.current && !roleRootRef.current.contains(e.target as Node)) {\n setRoleOpen(false);\n }\n };\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setRoleOpen(false);\n };\n document.addEventListener(\"mousedown\", onDoc);\n document.addEventListener(\"keydown\", onKey);\n return () => {\n document.removeEventListener(\"mousedown\", onDoc);\n document.removeEventListener(\"keydown\", onKey);\n };\n }, [roleOpen]);\n\n const commitDraft = (raw: string) => {\n const next = raw\n .split(/[,;\\s]+/)\n .map((s) => s.trim().toLowerCase())\n .filter(Boolean);\n if (!next.length) return;\n\n const invalid = next.find((e) => !EMAIL_RE.test(e));\n if (invalid) {\n setError(`“${invalid}” isn’t a valid email.`);\n return;\n }\n\n setEmails((prev) => {\n const seen = new Set(prev);\n const added: string[] = [];\n for (const e of next) {\n if (seen.has(e)) continue;\n seen.add(e);\n added.push(e);\n }\n return [...prev, ...added];\n });\n setDraft(\"\");\n setError(null);\n };\n\n const removeEmail = (email: string) => {\n setEmails((prev) => prev.filter((e) => e !== email));\n };\n\n const sendInvites = () => {\n const batch = [...emails];\n if (draft.trim()) {\n if (!EMAIL_RE.test(draft.trim().toLowerCase())) {\n setError(`“${draft.trim()}” isn’t a valid email.`);\n return;\n }\n batch.push(draft.trim().toLowerCase());\n }\n const unique = [...new Set(batch)];\n if (!unique.length) {\n setError(\"Add at least one email.\");\n return;\n }\n\n onInvite?.(unique, role);\n setPending((prev) => [\n ...unique.map((email, i) => ({\n id: `${Date.now()}-${i}`,\n email,\n role,\n })),\n ...prev,\n ]);\n setEmails([]);\n setDraft(\"\");\n setError(null);\n setSentFlash(true);\n window.setTimeout(() => setSentFlash(false), 1600);\n };\n\n const copyLink = async () => {\n try {\n await navigator.clipboard.writeText(inviteLink);\n } catch {\n /* demo */\n }\n setCopied(true);\n window.setTimeout(() => setCopied(false), 1600);\n };\n\n const canSend = emails.length > 0 || draft.trim().length > 0;\n const activeRole = roleMeta(role);\n\n return (\n \n
\n
\n

\n Invite members\n

\n

\n Add people to your workspace by email. They’ll get a link to join.\n

\n
\n {onClose ? (\n \n \n \n ) : null}\n
\n\n
\n
\n \n \n \n \n {emails.map((email) => (\n \n {email}\n removeEmail(email)}\n >\n \n \n \n ))}\n \n \n {\n setDraft(e.target.value);\n if (error) setError(null);\n }}\n onKeyDown={(e) => {\n if (e.key === \"Enter\" || e.key === \",\" || e.key === \"Tab\") {\n if (!draft.trim()) return;\n e.preventDefault();\n commitDraft(draft);\n }\n if (e.key === \"Backspace\" && !draft && emails.length) {\n removeEmail(emails[emails.length - 1]!);\n }\n }}\n onBlur={() => {\n if (draft.trim()) commitDraft(draft);\n }}\n onPaste={(e) => {\n const text = e.clipboardData.getData(\"text\");\n if (/[,;\\s]/.test(text)) {\n e.preventDefault();\n commitDraft(text);\n }\n }}\n placeholder={emails.length ? \"Add another…\" : \"name@company.com\"}\n className=\"min-w-[9rem] flex-1 bg-transparent px-1 py-0.5 text-[14px] text-[#0d0d0d] outline-none placeholder:text-[#8e8ea0] dark:text-[#ececec]\"\n autoComplete=\"off\"\n spellCheck={false}\n />\n
\n {error ? (\n

\n {error}\n

\n ) : (\n

\n Separate multiple emails with commas.\n

\n )}\n
\n\n
\n

\n Role\n

\n
\n setRoleOpen((o) => !o)}\n className={cn(\n \"flex h-11 w-full items-center justify-between gap-2 rounded-xl border border-black/[0.12] bg-white px-3 text-left text-[14px]\",\n \"transition hover:bg-[#f9f9f9] dark:border-white/[0.12] dark:bg-[#303030] dark:hover:bg-[#383838]\",\n roleOpen && \"border-black/40 dark:border-white/30\",\n )}\n >\n \n \n {activeRole.label}\n \n \n {activeRole.hint}\n \n \n \n \n\n \n {roleOpen ? (\n \n {ROLES.map((r) => {\n const selected = r.id === role;\n return (\n
  • \n {\n setRole(r.id);\n setRoleOpen(false);\n }}\n className={cn(\n \"flex w-full items-start gap-3 px-3 py-2.5 text-left transition\",\n \"hover:bg-black/[0.04] dark:hover:bg-white/[0.06]\",\n selected && \"bg-black/[0.03] dark:bg-white/[0.05]\",\n )}\n >\n \n \n {r.label}\n \n \n {r.hint}\n \n \n {selected ? (\n \n ) : null}\n \n
    • \n );\n })}\n \n ) : null}\n     \n
    \n
    \n\n \n \n {sentFlash ? (\n \n \n Invites sent\n \n ) : (\n \n Send invites\n \n )}\n \n \n\n
    \n
    \n

    \n or\n

    \n
    \n\n \n \n \n \n \n Copy invite link\n \n \n {inviteLink.replace(/^https?:\\/\\//, \"\")}\n \n \n \n \n {copied ? (\n <>\n \n Copied\n \n ) : (\n <>\n \n Copy\n \n )}\n \n \n\n {pending.length > 0 && (\n
    \n
    \n

    \n Pending invites\n

    \n

    {pending.length}

    \n
    \n
      \n \n {pending.map((item) => (\n \n \n {initials(item.email)}\n \n
      \n

      \n {item.email}\n

      \n

      \n {roleMeta(item.role).label}\n

      \n
      \n {\n /* demo */\n }}\n >\n Resend\n \n \n setPending((prev) => prev.filter((p) => p.id !== item.id))\n }\n >\n \n \n \n ))}\n       \n
    \n
    \n )}\n
    \n \n );\n}\n"}],"meta":{"studioName":"GFA Development & Design Studio","siteUrl":"https://ui.gkhn.dev"}}