adilallo
43 lines
1.6 KiB
TypeScript
43 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { useTranslation } from "../../../contexts/MessagesContext";
|
|
import type { LanguageSwitcherProps, Language } from "./LanguageSwitcher.types";
|
|
|
|
function LanguageSwitcherView({ className = "" }: LanguageSwitcherProps) {
|
|
const t = useTranslation("languageSwitcher");
|
|
|
|
const AVAILABLE_LANGUAGES: Language[] = [
|
|
{
|
|
code: "en",
|
|
name: t("languages.english.name"),
|
|
nativeName: t("languages.english.nativeName"),
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className={className}>
|
|
<label htmlFor="language-select" className="sr-only">
|
|
{t("label")}
|
|
</label>
|
|
<select
|
|
id="language-select"
|
|
className="bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] font-inter text-sm leading-5 font-normal border border-[var(--color-surface-default-secondary)] rounded-[var(--radius-measures-radius-small)] px-[var(--spacing-scale-012)] py-[var(--spacing-scale-008)] focus:outline-none focus:ring-2 focus:ring-[var(--color-surface-default-brand-royal)] focus:ring-offset-2 cursor-pointer"
|
|
aria-label={t("ariaLabel")}
|
|
disabled
|
|
>
|
|
{AVAILABLE_LANGUAGES.map((language) => (
|
|
<option key={language.code} value={language.code}>
|
|
{language.nativeName}
|
|
</option>
|
|
))}
|
|
</select>
|
|
<p className="text-[var(--color-content-default-secondary)] font-inter text-xs leading-4 font-normal mt-[var(--spacing-scale-008)]">
|
|
{t("comingSoonMessage")}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default memo(LanguageSwitcherView);
|