); } 1c:T288a,"use client"; import type React from "react"; import { useState } from "react"; import { Mail, AlertCircle, User, Users, Shield, Clock } from "lucide-react"; import { Text } from "@/components/retroui/Text"; import { Label } from "@/components/retroui/Label"; import { Input } from "@/components/retroui/Input"; import { Badge } from "@/components/retroui/Badge"; import { Button } from "@/components/retroui/Button"; import { Avatar } from "@/components/retroui/Avatar"; import { Field } from "@base-ui/react/field"; // Types for team members and invitations type Role = "admin" | "editor" | "viewer"; type TeamMember = { id: string; name: string; email: string; avatarUrl?: string; joinedAt: Date; }; type Invitation = { id: string; email: string; sentAt: Date; status: "pending" | "accepted" | "expired"; }; export default function InviteMembersBlockOne() { // State for the invite form const [email, setEmail] = useState(""); // const [role, setRole] = useState("editor"); const [showError, setShowError] = useState(false); const [errorMessage, setErrorMessage] = useState(""); // State for team members and invitations const [teamMembers] = useState([ { id: "1", name: "Alex Johnson", email: "alex@example.com", avatarUrl: "https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/person_c.png", joinedAt: new Date(2023, 0, 15), }, { id: "2", name: "Sam Wilson", email: "sam@example.com", avatarUrl: "https://pub-5f7cbdfd9ffa4c838e386788f395f0c4.r2.dev/people/person_b.png", joinedAt: new Date(2023, 2, 10), }, ]); const [invitations, setInvitations] = useState([ { id: "1", email: "taylor@example.com", sentAt: new Date(2023, 3, 20), status: "pending", }, { id: "2", email: "jordan@example.com", sentAt: new Date(2023, 3, 18), status: "accepted", }, { id: "3", email: "casey@example.com", sentAt: new Date(2023, 3, 5), status: "expired", }, ]); // Handle form submission const handleInvite = (e: React.FormEvent) => { e.preventDefault(); // Basic validation if (!email) { setShowError(true); setErrorMessage("Please enter an email address"); return; } if (!email.includes("@")) { setShowError(true); setErrorMessage("Please enter a valid email address"); return; } // Check if already invited or a member const alreadyInvited = invitations.some( (inv) => inv.email === email && inv.status === "pending", ); const alreadyMember = teamMembers.some((member) => member.email === email); if (alreadyInvited) { setShowError(true); setErrorMessage("This email has already been invited"); return; } if (alreadyMember) { setShowError(true); setErrorMessage("This email is already a team member"); return; } // Add new invitation const newInvitation: Invitation = { id: Date.now().toString(), email, sentAt: new Date(), status: "pending", }; setInvitations([newInvitation, ...invitations]); setEmail(""); setShowError(false); }; // Handle resending invitation const handleResend = (id: string) => { setInvitations( invitations.map((inv) => inv.id === id ? { ...inv, sentAt: new Date(), status: "pending" } : inv, ), ); }; // Handle canceling invitation const handleCancel = (id: string) => { setInvitations(invitations.filter(

RetroUI Onboarding Blocks

Onboarding Steps 01

Onboarding Steps 02

Business Onboarding Survey 01

Business Onboarding Survey 02

Team Invitation 01

Onboarding Integrations 01

User Profile Onboarding 01