Elegant animated team member selector with drag-free layout transitions, search, and progress ring.
import TeamBuilder, { type TeamMember } from "@/components/ui/team-builder";
import React from "react";
export default function DemoOne() {
const [selected, setSelected] = React.useState<string[]>(["1", "3"]);
const MOCK_MEMBERS: TeamMember[] = [
{ id: "1", name: "Alex Morgan", email: "alex@company.com", role: "Design", avatar: "https://cdn.21st.dev/assets/mirror/4c/4ca3ecc67e7d73a69456cc79a7cc3e57408a3f94b88a68e21effd3247bdf794c.jpg" },
{ id: "2", name: "Ben Sisko", email: "ben@company.com", role: "Eng" },
{ id: "4", name: "Darren K", email: "darren@company.com", role: "Eng", avatar: "https://cdn.21st.dev/assets/mirror/e5/e55e8d544c269839ddf17388dee3a763e2f3552b13faa60fe8f71673fb1d4c48.jpg" },
{ id: "5", name: "Evan Wright", email: "evan@company.com", role: "Marketing" },
{ id: "6", name: "Fiona Gallagher", email: "fiona@company.com", role: "Sales", avatar: "https://cdn.21st.dev/assets/mirror/91/9114aafb8566d8c8413d7d606618bdb572939bddbcde964efd2bb82a3e26544b.jpg" },
{ id: "7", name: "George Martin", email: "george@company.com", role: "Legal" },
];
return (
<div className="flex min-h-screen items-center justify-center bg-white text-black dark:bg-black dark:text-white">
{/* <FastInternetPage/> */}
<TeamBuilder
members={MOCK_MEMBERS}
selectedIds={selected}
onChange={setSelected}
maxMembers={5}
/>
</div>
)
}