Invite Members

"use client";

import { useId, useRef, useState, type ClipboardEvent, type KeyboardEvent, type ReactNode } from "react";
import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react";
import useMeasure from "react-use-measure";
import { IconChevronDown, IconLoader2, IconUser, IconX } from "@tabler/icons-react";
import { DropdownMenu, type MenuItem } from "../dropdown-menu/dropdown-menu";
import { cn } from "@/lib/utils";

// Invite members. Type or paste addresses (any mix of commas, spaces, semicolons
// and new lines) and each one becomes a chip. Addresses that aren't valid, or
// belong to someone already on the team, turn red with a small shake; click
// one to pull it back into the field and fix it. Sending flies each address
// out of its chip and into its own row in the member list, where the rest of
// the list makes room. Roles change from each row's menu.

export type Member = {
  id: string;
  email: string;
  name?: string;
  role: string;
  /** Pending members have been invited but haven't joined yet. */
  status?: "active" | "pending";
  /** Image URL. Initials are shown without one. */