Account menu

import { UserCircleIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { AccountMenu, ColorSchemeSubmenu, LanguageSubmenu, MenuItem, MenuSeparator } from '@arbol-ai/ui';
import type { ColorScheme } from '@arbol-ai/ui';

const LANGUAGES = [
  { label: 'English', value: 'en' },
  { label: 'Español', value: 'es' },
] as const;

const PreferencesExample = () => {
  const [colorScheme, setColorScheme] = useState<ColorScheme>('system');
  const [language, setLanguage] = useState<'en' | 'es'>('en');
  return (
    <div className="rounded-card w-[250px] border px-4 py-4">
      <AccountMenu email="ana.ruiz@example.com" name="Ana Ruiz" onSignOut={() => undefined}>
        <MenuItem href="#/account-menu" icon={<UserCircleIcon />}>
          Profile
        </MenuItem>
        <MenuSeparator />
        <ColorSchemeSubmenu onChange={setColorScheme} value={colorScheme} />
        <LanguageSubmenu onChange={setLanguage} options={LANGUAGES} value={language} />
      </AccountMenu>
    </div>
  );
};

<PreferencesExample />

import { ArrowSquareOutIcon, UsersThreeIcon } from '@phosphor-icons/react';
import { AccountMenu, MenuItem } from '@arbol-ai/ui';

<div className="rounded-card flex w-[60px] justify-center border px-2 py-4">
  <AccountMenu
    details="Your access: Front desk · Dra. Gloria Londoño’s agenda"
    email="ana.ruiz@example.com"
    isCollapsed
    name="Ana Ruiz"
    onSignOut={() => undefined}
  >
    <MenuItem href="#/account-menu" icon={<UsersThreeIcon />}>
      Team
    </MenuItem>
    <MenuItem
      href="https://account.example.com/profile"
      icon={<ArrowSquareOutIcon />}
      target="_blank"
    >
      Manage your account
    </MenuItem>
  </AccountMenu>
</div>