import { AvatarChip, AvatarChipAvatar, AvatarChipLabel, AvatarChipRemove } from "@/components/ui/avatar-chip";
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 BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;
export function AvatarChipExample() {
return (
<div className="flex flex-wrap items-center gap-3">
<AvatarChip>
<AvatarChipAvatar
alt=""
name={getFirstName(DEMO_PEOPLE.janakiAmmal)}
palette={["#fff0e2", "#fa9769"]}
/>
<AvatarChipLabel>{DEMO_PEOPLE.janakiAmmal}</AvatarChipLabel>
</AvatarChip>
<AvatarChip variant="outline">
<AvatarChipAvatar
alt=""
name={getFirstName(DEMO_PEOPLE.vikramSarabhai)}
palette={BLUE_PALETTE}
/>
<AvatarChipLabel>{DEMO_PEOPLE.vikramSarabhai}</AvatarChipLabel>
<AvatarChipRemove aria-label={`Remove ${DEMO_PEOPLE.vikramSarabhai}`} />
</AvatarChip>
</div>
);
}
export default AvatarChipExample;
