A compact avatar identity badge with a role and supporting detail.
import { AvatarBadge } from "@/components/ui/avatar-badge";
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 AvatarBadgeExample() {
return (
<AvatarBadge
avatar={{
name: getFirstName(DEMO_PEOPLE.gagandeepKang),
palette: BLUE_PALETTE,
size: "lg",
}}
badge="Pro"
description="Founder & CEO"
name={DEMO_PEOPLE.gagandeepKang}
/>
);
}
export default AvatarBadgeExample;