zv/wtr
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: refine language selector styling

Browse Source
This commit is contained in:
zv
2026-06-14 11:15:37 +02:00
parent 3515fca0da
commit 7dbcd8686b
1 changed files with 4 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
components/ui/language-toggle.tsx
View File

@@ -1,6 +1,6 @@
"use client"; "use client";
import { Languages } from "lucide-react"; import { ChevronDown, Languages } from "lucide-react";
import { useI18n, type Language } from "@/lib/i18n"; import { useI18n, type Language } from "@/lib/i18n";
export function LanguageToggle() { export function LanguageToggle() {
@@ -8,16 +8,17 @@ export function LanguageToggle() {
return ( return (
<label className="relative flex items-center"> <label className="relative flex items-center">
<span className="sr-only">{t("language.label")}</span> <span className="sr-only">{t("language.label")}</span>
<Languages className="pointer-events-none absolute left-3 size-4 text-muted" /> <Languages className="pointer-events-none absolute left-3.5 size-4 text-accent" />
<select <select
aria-label={t("language.label")} aria-label={t("language.label")}
value={language} value={language}
onChange={(event) => setLanguage(event.target.value as Language)} onChange={(event) => setLanguage(event.target.value as Language)}
className="surface-control h-10 appearance-none rounded-control py-2 pl-9 pr-3 text-xs font-semibold uppercase text-foreground transition hover:bg-surface-raised/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent" className="surface-control h-11 min-w-36 appearance-none rounded-control py-2 pl-10 pr-10 text-sm font-medium text-foreground transition hover:bg-surface-raised/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent"
> >
<option value="pl">{t("language.polish")}</option> <option value="pl">{t("language.polish")}</option>
<option value="en">{t("language.english")}</option> <option value="en">{t("language.english")}</option>
</select> </select>
<ChevronDown className="pointer-events-none absolute right-3.5 size-4 text-muted" />
</label> </label>
); );
} }