LanguageSelector() — ui Function Reference

Architecture documentation for the LanguageSelector() function in language-selector.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ LanguageSelector() — ui Function Reference

Dependency Diagram

graph TD
  e1c5d52b_3c48_254c_1500_790d8bc634c4["LanguageSelector()"]
  0196e53a_5d8c_e12e_d1db_960c6e31ec4a["language-selector.tsx"]
  e1c5d52b_3c48_254c_1500_790d8bc634c4 -->|defined in| 0196e53a_5d8c_e12e_d1db_960c6e31ec4a
  style e1c5d52b_3c48_254c_1500_790d8bc634c4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/language-selector.tsx lines 86–125

export function LanguageSelector({
  value,
  onValueChange,
  className,
  languages = ["en", "ar", "he"],
}: LanguageSelectorProps & {
  className?: string
  languages?: Language[]
}) {
  return (
    <Select
      items={languageOptions}
      value={value}
      onValueChange={(value) => onValueChange(value as Language)}
    >
      <SelectTrigger
        size="sm"
        className={cn("w-36", className)}
        dir="ltr"
        data-name="language-selector"
      >
        <SelectValue />
      </SelectTrigger>
      <SelectContent
        dir="ltr"
        className="data-closed:animate-none data-open:animate-none"
      >
        <SelectGroup>
          {languageOptions
            .filter((option) => languages.includes(option.value as Language))
            .map((option) => (
              <SelectItem key={option.value} value={option.value}>
                {option.label}
              </SelectItem>
            ))}
        </SelectGroup>
      </SelectContent>
    </Select>
  )
}