remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Polish admin language dropdown layout and selection styles.
Local Build and Deploy / deploy (push) Successful in 54s
Details

Browse Source 
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed 2026-07-15 21:46:54 +02:00
1 parent ea07950374
commit 2c68fb7e5a
1 file changed
+102 -67
Download Patch File Download Diff File Expand all files Collapse all files
src/components/language-switcher.tsx
+102 -67
View File
@@ -1,6 +1,6 @@
"use client";
import { Search } from "lucide-react";
import { Check, ChevronDown, Search } from "lucide-react";
import Image from "next/image";
import { useRouter } from "next/navigation";
import { useLocale } from "next-intl";
@@ -43,6 +43,7 @@ export function LanguageSwitcher({
const [open, setOpen] = useState(false);
const [search, setSearch] = useState("");
const ref = useRef<HTMLDivElement>(null);
const searchRef = useRef<HTMLInputElement>(null);
const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
const isAdmin = variant === "admin";
@@ -67,11 +68,19 @@ export function LanguageSwitcher({
}, []);
useEffect(() => {
if (!open) setSearch("");
if (!open) {
setSearch("");
return;
}
const id = window.setTimeout(() => searchRef.current?.focus(), 0);
return () => window.clearTimeout(id);
}, [open]);
function switchLocale(code: string) {
if (code === locale) return;
if (code === locale) {
setOpen(false);
return;
}
startTransition(async () => {
await setLocaleCookie(code);
router.refresh();
@@ -88,105 +97,131 @@ export function LanguageSwitcher({
aria-label="Change language"
title="Language"
aria-expanded={open}
aria-haspopup="listbox"
className={
isAdmin
? "flex items-center gap-1.5 h-9 rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] px-2 text-xs font-bold uppercase tracking-wide text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/15 hover:text-[var(--admin-accent)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] disabled:opacity-60"
? "flex items-center gap-1.5 h-9 rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] px-2.5 text-xs font-bold uppercase tracking-wide text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/15 hover:text-[var(--admin-accent)] transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--admin-accent)] disabled:opacity-60"
: "nav-item flex items-center gap-1.5 bg-transparent text-[13px] border-none cursor-pointer px-1"
}
>
<Image
src={`/assets/images/icons/flags/${current.code}.png`}
alt={current.lang}
alt=""
width={16}
height={16}
className="inline-block h-4 w-auto"
/>
<span>{current.code.toUpperCase()}</span>
<svg
className="w-3 h-3 opacity-70"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
<ChevronDown
className={`h-3 w-3 opacity-70 transition-transform ${open ? "rotate-180" : ""}`}
aria-hidden
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 9l-7 7-7-7"
/>
</svg>
/>
</button>
{open && (
<div
role="listbox"
aria-label="Languages"
className={
isAdmin
? "absolute right-0 top-full mt-1.5 z-50 w-[220px] rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface)] text-[var(--admin-text)] shadow-xl py-2"
: "dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
? "absolute right-0 top-full mt-1.5 z-50 w-56 overflow-hidden rounded-xl border border-[var(--admin-border)] bg-[var(--admin-surface-elevated)] text-[var(--admin-text)] shadow-xl"
: "dropdown-menu absolute left-0 md:right-0 md:left-auto top-full mt-0.5 w-56 overflow-hidden rounded-xl z-50"
}
>
<div className="px-3 pb-1">
<div
<div
className={
isAdmin
? "border-b border-[var(--admin-border)] p-2"
: "border-b border-black/10 dark:border-white/10 p-2"
}
>
<label
className={
isAdmin
? "flex items-center gap-1.5 rounded-md border border-[var(--admin-border)] bg-[var(--admin-canvas)] px-2 py-1.5 text-sm"
: "flex items-center gap-1.5 rounded-md border bg-background px-2 py-1.5 text-sm"
? "flex min-w-0 items-center gap-2 rounded-lg border border-[var(--admin-border)] bg-[var(--admin-canvas)] px-2.5 py-1.5"
: "flex min-w-0 items-center gap-2 rounded-lg border bg-background px-2.5 py-1.5"
}
>
<Search className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
<Search
className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
aria-hidden
/>
<input
ref={searchRef}
type="text"
placeholder="Search..."
placeholder="Search…"
value={search}
onChange={(e) => setSearch(e.target.value)}
className="flex-1 bg-transparent outline-none text-sm border-0 p-0 m-0 text-inherit"
aria-label="Search languages"
className={
isAdmin
? "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm text-[var(--admin-text)] outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0 placeholder:text-[var(--admin-text-muted)]"
: "min-w-0 flex-1 border-0 bg-transparent p-0 text-sm outline-none shadow-none focus:border-0 focus:shadow-none focus:ring-0"
}
/>
</div>
</label>
</div>
<div className="max-h-[260px] overflow-y-auto">
<div className="max-h-64 overflow-y-auto overscroll-contain p-1.5">
{filtered.length === 0 && (
<p className="px-3 py-4 text-center text-xs text-muted-foreground">
<p
className={`px-2 py-6 text-center text-xs ${isAdmin ? "text-[var(--admin-text-muted)]" : "text-muted-foreground"}`}
>
No languages found
</p>
)}
{filtered.map((l) => (
<button
key={l.code}
type="button"
onClick={() => switchLocale(l.code)}
className={`flex w-full items-center gap-2 px-3 py-2 text-left text-sm font-medium transition-colors rounded-lg mx-1 border-0 cursor-pointer ${
l.code === locale
? isAdmin
? "bg-[var(--admin-accent)]/15 text-[var(--admin-text)]"
: "opacity-100"
: isAdmin
? "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
: "opacity-70 hover:opacity-100"
}`}
style={
isAdmin
? { width: "calc(100% - 8px)" }
: {
color: "var(--color-text-readable, var(--color-text))",
background:
l.code === locale
? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
: "none",
width: "calc(100% - 8px)",
}
}
>
<Image
src={`/assets/images/icons/flags/${l.code}.png`}
alt={l.lang}
width={16}
height={16}
className="inline-block h-4 w-auto"
/>
{l.label}
</button>
))}
{filtered.map((l) => {
const selected = l.code === locale;
return (
<button
key={l.code}
type="button"
role="option"
aria-selected={selected}
onClick={() => switchLocale(l.code)}
className={
isAdmin
? `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm transition-colors border-0 cursor-pointer ${
selected
? "bg-[var(--admin-accent)]/18 text-[var(--admin-accent)] font-semibold"
: "bg-transparent text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/10"
}`
: `flex w-full items-center gap-2.5 rounded-lg px-2.5 py-2 text-left text-sm font-medium transition-colors border-0 cursor-pointer ${
selected
? "opacity-100"
: "opacity-70 hover:opacity-100"
}`
}
style={
isAdmin
? undefined
: {
color: "var(--color-text-readable, var(--color-text))",
background: selected
? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
: "transparent",
}
}
>
<Image
src={`/assets/images/icons/flags/${l.code}.png`}
alt=""
width={16}
height={16}
className="inline-block h-4 w-auto shrink-0"
/>
<span className="min-w-0 flex-1 truncate">{l.label}</span>
{selected ? (
<Check
className={`h-3.5 w-3.5 shrink-0 ${isAdmin ? "text-[var(--admin-accent)]" : "opacity-80"}`}
aria-hidden
/>
) : (
<span className="w-3.5 shrink-0" aria-hidden />
)}
</button>
);
})}
</div>
</div>
)}