Components
Loading preview...
A modern team invitation and member management component with permission controls
npx shadcn@latest add https://21st.dev/r/preetsuthar17/team-inviteimport { useState } from "react";
import { TeamInvite,
type TeamMember,
type PermissionLevel
} from "@/components/ui/team-invite";
const generateDiceBearAvatar = (seed: string) => {
return `https://api.dicebear.com/9.x/glass/svg?seed=${encodeURIComponent(
seed
)}`;
};
const initialMembers: TeamMember[] = [
{
id: "1",
name: "Captain Pancakes",
email: "syrup.lover@breakfast.club",
avatar: generateDiceBearAvatar("pancakes"),
role: "admin",
isOwner: true,
},
{
id: "2",
name: "Disco Llama",
email: "groovy.alpaca@dance.floor",
avatar: generateDiceBearAvatar("llama"),
role: "can-edit",
},
{
id: "3",
name: "Professor Pickles",
email: "sour.cucumber@university.edu",
avatar: generateDiceBearAvatar("pickles"),
role: "can-view",
},
{
id: "4",
name: "Ninja Noodles",
email: "stealth.pasta@dojo.com",
avatar: generateDiceBearAvatar("ninja"),
role: "can-view",
},
{
id: "5",
name: "Wizard Waffle",
email: "magical.breakfast@hogwarts.com",
avatar: generateDiceBearAvatar("wizard"),
role: "can-view",
},
];
export default function DemoOne() {
const [members, setMembers] = useState<TeamMember[]>(initialMembers);
const handleInvite = async (email: string, permission: PermissionLevel) => {
await new Promise((resolve) => setTimeout(resolve, 1000));
const newMember: TeamMember = {
id: Date.now().toString(),
name: email.split("@")[0],
email,
avatar: generateDiceBearAvatar(email),
role: permission,
};
setMembers((prev) => [...prev, newMember]);
};
const handleUpdateMemberPermission = (
memberId: string,
permission: PermissionLevel
) => {
setMembers((prev) =>
prev.map((member) =>
member.id === memberId ? { ...member, role: permission } : member
)
);
};
const handleCancel = () => {
console.log("Cancelled team invite");
};
return (
<div className="flex flex-col items-center justify-center max-w-lg w-full p-8">
<TeamInvite
teamName="HextaUI"
teamLogo="/Logo.png"
totalMembers={members.length}
members={members}
onInvite={handleInvite}
onUpdateMemberPermission={handleUpdateMemberPermission}
onCancel={handleCancel}
/>
</div>
);
}