Avatar Team List

import { AvatarTeamList } from "@/components/ui/avatar-team-list";

export const DEMO_PEOPLE = {
  gagandeepKang: "Gagandeep Kang",
  janakiAmmal: "Janaki Ammal",
  kalpanaChawla: "Kalpana Chawla",
  rajReddy: "Raj Reddy",
  srinivasaRamanujan: "Srinivasa Ramanujan",
  vikramSarabhai: "Vikram Sarabhai",
} as const;

const WHITESPACE_PATTERN = /\s+/;

export const getFirstName = (name: string): string =>
  name.trim().split(WHITESPACE_PATTERN)[0] ?? name;

const TEAM_MEMBERS = [
	{
		avatar: {
			name: getFirstName(DEMO_PEOPLE.janakiAmmal),
			palette: ["#dff4ff", "#38bdf8"],
		},
		description: "janaki@example.com",
		id: "janaki",
		name: DEMO_PEOPLE.janakiAmmal,
		role: "Owner",
		status: "online",
	},
	{
		avatar: {
			name: getFirstName(DEMO_PEOPLE.vikramSarabhai),
			palette: ["#fff0e2", "#fa9769"],
		},
		description: "vikram@example.com",
		id: "vikram",
		name: DEMO_PEOPLE.vikramSarabhai,
		role: "Engineer",
		status: "away",
	},
	{
		avatar: {
			name: getFirstName(DEMO_PEOPLE.kalpanaChawla),
			palette: ["#e7fbe8", "#9ce786"],
		},
		description: "kalpana@example.com",
		id: "kalpana",
		name: DEMO_PEOPLE.kalpanaChawla,
		role: "Scientist",
		status: "offline",
	},
] as const;

export function AvatarTeamListExample() {
	return <AvatarTeamList className="w-full max-w-xl" members={TEAM_MEMBERS} />;
}

export default AvatarTeamListExample;