Introduce <LanguageSwitcher /> & improve i18n support

[brionmario]

Purpose

This pull request introduces new utilities and UI components to enhance internationalization (i18n) and language switching capabilities across the codebase. The most significant changes include new helper functions for locale and emoji resolution, a reusable language switcher component, and improvements to component-level i18n customization.

Usage

Basic Mode

<LanguageSwitcher />

Render Props Mode

<LanguageSwitcher>
  {({languages, currentLanguage, onLanguageChange, isLoading}) => {
    const current = languages.find(l => l.code === currentLanguage);
    return (
      <DropdownMenu.Root>
        <DropdownMenu.Trigger asChild>
          <button
            disabled={isLoading}
            className="flex items-center gap-2 px-3 py-1.5 rounded-md hover:bg-gray-100 transition-colors disabled:opacity-50"
          >
            <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center text-white text-base leading-none">
              {current?.emoji ?? '🌐'}
            </div>
            <span className="text-sm text-gray-700">{current?.displayName ?? currentLanguage}</span>
            <svg className="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
            </svg>
          </button>
        </DropdownMenu.Trigger>
        <DropdownMenu.Portal>
          <DropdownMenu.Content
            align="end"
            sideOffset={4}
            className="z-50 min-w-[160px] bg-white rounded-md shadow-lg border border-gray-200 py-1 outline-none"
          >
            {languages.map(lang => (
              <DropdownMenu.Item
                key={lang.code}
                onSelect={() => onLanguageChange(lang.code)}
                className={`flex items-center gap-2 px-4 py-2 text-sm cursor-pointer outline-none select-none data-[highlighted]:bg-gray-50 ${
                  lang.code === currentLanguage ? 'font-semibold text-blue-600' : 'text-gray-700'
                }`}
              >
                <span>{lang.emoji}</span>
                <span>{lang.displayName}</span>
              </DropdownMenu.Item>
            ))}
          </DropdownMenu.Content>
        </DropdownMenu.Portal>
      </DropdownMenu.Root>
    );
  }}
</LanguageSwitcher>

Related Issues

• Fixes <LanguageSwitcher /> component for Thunder #386

Related PRs

• N/A

Checklist

• Followed the CONTRIBUTING guidelines.
• Manual test round performed and verified.
• Documentation provided. (Add links if there are any)
• Unit tests provided. (Add links if there are any)

Security checks

• Followed secure coding standards in http://wso2.com/technical-reports/wso2-secure-engineering-guidelines?
• Confirmed that this PR doesn't commit any keys, passwords, tokens, usernames, or other secrets?

[asgardeo-github-bot]

🦋 Changeset detected

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.