import { PresenceAvatar, type PresenceStatus } from "@/components/ui/presence-avatar";
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 PEOPLE = [
{
name: DEMO_PEOPLE.janakiAmmal,
palette: ["#dff4ff", "#38bdf8"],
status: "online",
},
{
name: DEMO_PEOPLE.vikramSarabhai,
palette: ["#f4e8ff", "#b881eb"],
status: "online",
unreadCount: 3,
},
{
name: DEMO_PEOPLE.srinivasaRamanujan,
palette: ["#fff1df", "#f48a61"],
status: "away",
},
{
name: DEMO_PEOPLE.gagandeepKang,
palette: ["#e8edff", "#a7a8f4"],
status: "offline",
unreadCount: 128,
},
] as const satisfies readonly {
name: string;
palette: readonly [string, string];
status: PresenceStatus;
unreadCount?: number;
}[];
export function PresenceAvatarExample() {
return (
<div className="grid w-full max-w-xl grid-cols-2 justify-items-center gap-9 sm:grid-cols-4">
{PEOPLE.map((person) => (
<div
className="flex flex-col items-center gap-5 text-center"
key={person.name}
>
<PresenceAvatar
avatar={{
alt: `${person.name} avatar`,
frame: "circle",
name: getFirstName(person.name),
palette: person.palette,
}}
status={person.status}
unreadCount={"unreadCount" in person ? person.unreadCount : 0}
/>
<span className="text-muted-foreground text-xs">
{person.status}
{"unreadCount" in person ? `, ${person.unreadCount} unread` : ""}
</span>
</div>
))}
</div>
);
}
export default PresenceAvatarExample;
