"use client";
import { useId } from "react";
/*
* Team Invite – a small card illustration, in a single self-contained file.
* Two connected teammates and an empty dashed slot. A cursor drags a third avatar into the slot:
* it lands, the dashed line turns solid and the status dot lights up – then the scene starts over.
* The artwork is laid out on a 600 × 400 grid inside a 3 : 2 frame and scales with its container.
*/
export type TeamInviteAvatar = {
/** Image URL – a square portrait, shown in a circle */
src: string;
/** Name for the accessible description */
name?: string;
};
export type TeamInviteProps = {
/** The two teammates that are already connected, then the one being invited */
avatars: [TeamInviteAvatar, TeamInviteAvatar, TeamInviteAvatar];
className?: string;
/** Accessible description of the scene */
label?: string;
};
export function TeamInvite({ avatars, className, label }: TeamInviteProps) {
const id = "ui-ti" + useId().replace(/[^a-zA-Z0-9_-]/g, "");
const [a, b, c] = avatars;
const names = avatars.map((p, i) => p.name ?? `Teammate ${i + 1}`);
return (
{/* React 19 hoists this into once, no matter how many instances render */}
{/* Dragged from the right into the slot, with the cursor holding on */}
{/* Pointer with soft, rounded corners; its tip sits at (0, 0) of the viewBox */}