Avatar Account Menu

"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;