An account menu with avatar, profile details, and actions.
"use client";
import { AvatarAccountMenu } from "@/components/ui/avatar-account-menu";
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 ignoreAction = () => undefined;
const BLUE_PALETTE = ["#dff4ff", "#38bdf8"] as const;
const ACTIONS = [
{
id: "profile",
label: "View profile",
onSelect: ignoreAction,
},
{
id: "settings",
label: "Account settings",
onSelect: ignoreAction,
},
] as const;
export function AvatarAccountMenuExample() {
const urlTheme = typeof window === "undefined" ? null : new URLSearchParams(window.location.search).get("theme");
const demoTheme = urlTheme ?? (typeof document !== "undefined" && document.documentElement.classList.contains("dark") ? "dark" : "light");
return (
<AvatarAccountMenu
contentStyle={{ backgroundColor: demoTheme === "dark" ? "#18181b" : "#ffffff", color: demoTheme === "dark" ? "#fafafa" : "#18181b" }}
actions={ACTIONS}
avatar={{
name: getFirstName(DEMO_PEOPLE.janakiAmmal),
palette: BLUE_PALETTE,
size: "xl",
}}
contentClassName="dark"
email="janaki@example.com"
name={DEMO_PEOPLE.janakiAmmal}
signOutAction={{
id: "sign-out",
label: "Sign out",
onSelect: ignoreAction,
}}
/>
);
}
export default AvatarAccountMenuExample;