Polish admin language dropdown layout and selection styles.
Local Build and Deploy / deploy (push) Successful in 54s
Local Build and Deploy / deploy (push) Successful in 54s
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed
1 parent
ea07950374
commit
2c68fb7e5a
1 file changed
+102
-67
@@ -1,6 +1,6 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { Search } from "lucide-react";
|
import { Check, ChevronDown, Search } from "lucide-react";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import { useRouter } from "next/navigation";
|
import { useRouter } from "next/navigation";
|
||||||
import { useLocale } from "next-intl";
|
import { useLocale } from "next-intl";
|
||||||
@@ -43,6 +43,7 @@ export function LanguageSwitcher({
|
|||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const [search, setSearch] = useState("");
|
const [search, setSearch] = useState("");
|
||||||
const ref = useRef<HTMLDivElement>(null);
|
const ref = useRef<HTMLDivElement>(null);
|
||||||
|
const searchRef = useRef<HTMLInputElement>(null);
|
||||||
const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
|
const current = LOCALES.find((l) => l.code === locale) ?? LOCALES[0];
|
||||||
const isAdmin = variant === "admin";
|
const isAdmin = variant === "admin";
|
||||||
|
|
||||||
@@ -67,11 +68,19 @@ export function LanguageSwitcher({
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!open) setSearch("");
|
if (!open) {
|
||||||
|
setSearch("");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const id = window.setTimeout(() => searchRef.current?.focus(), 0);
|
||||||
|
return () => window.clearTimeout(id);
|
||||||
}, [open]);
|
}, [open]);
|
||||||
|
|
||||||
function switchLocale(code: string) {
|
function switchLocale(code: string) {
|
||||||
if (code === locale) return;
|
if (code === locale) {
|
||||||
|
setOpen(false);
|
||||||
|
return;
|
||||||
|
}
|
||||||
startTransition(async () => {
|
startTransition(async () => {
|
||||||
await setLocaleCookie(code);
|
await setLocaleCookie(code);
|
||||||
router.refresh();
|
router.refresh();
|
||||||
@@ -88,105 +97,131 @@ export function LanguageSwitcher({
|
|||||||
aria-label="Change language"
|
aria-label="Change language"
|
||||||
title="Language"
|
title="Language"
|
||||||
aria-expanded={open}
|
aria-expanded={open}
|
||||||
|
aria-haspopup="listbox"
|
||||||
className={
|
className={
|
||||||
isAdmin
|
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"
|
: "nav-item flex items-center gap-1.5 bg-transparent text-[13px] border-none cursor-pointer px-1"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<Image
|
<Image
|
||||||
src={`/assets/images/icons/flags/${current.code}.png`}
|
src={`/assets/images/icons/flags/${current.code}.png`}
|
||||||
alt={current.lang}
|
alt=""
|
||||||
width={16}
|
width={16}
|
||||||
height={16}
|
height={16}
|
||||||
className="inline-block h-4 w-auto"
|
className="inline-block h-4 w-auto"
|
||||||
/>
|
/>
|
||||||
<span>{current.code.toUpperCase()}</span>
|
<span>{current.code.toUpperCase()}</span>
|
||||||
<svg
|
<ChevronDown
|
||||||
className="w-3 h-3 opacity-70"
|
className={`h-3 w-3 opacity-70 transition-transform ${open ? "rotate-180" : ""}`}
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
aria-hidden
|
aria-hidden
|
||||||
>
|
/>
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth={2}
|
|
||||||
d="M19 9l-7 7-7-7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
{open && (
|
{open && (
|
||||||
<div
|
<div
|
||||||
|
role="listbox"
|
||||||
|
aria-label="Languages"
|
||||||
className={
|
className={
|
||||||
isAdmin
|
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"
|
? "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 min-w-[200px] rounded-xl z-50 py-2"
|
: "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={
|
className={
|
||||||
isAdmin
|
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 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 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 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
|
<input
|
||||||
|
ref={searchRef}
|
||||||
type="text"
|
type="text"
|
||||||
placeholder="Search..."
|
placeholder="Search…"
|
||||||
value={search}
|
value={search}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
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>
|
||||||
<div className="max-h-[260px] overflow-y-auto">
|
|
||||||
|
<div className="max-h-64 overflow-y-auto overscroll-contain p-1.5">
|
||||||
{filtered.length === 0 && (
|
{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
|
No languages found
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{filtered.map((l) => (
|
{filtered.map((l) => {
|
||||||
<button
|
const selected = l.code === locale;
|
||||||
key={l.code}
|
return (
|
||||||
type="button"
|
<button
|
||||||
onClick={() => switchLocale(l.code)}
|
key={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 ${
|
type="button"
|
||||||
l.code === locale
|
role="option"
|
||||||
? isAdmin
|
aria-selected={selected}
|
||||||
? "bg-[var(--admin-accent)]/15 text-[var(--admin-text)]"
|
onClick={() => switchLocale(l.code)}
|
||||||
: "opacity-100"
|
className={
|
||||||
: isAdmin
|
isAdmin
|
||||||
? "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]"
|
? `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 ${
|
||||||
: "opacity-70 hover:opacity-100"
|
selected
|
||||||
}`}
|
? "bg-[var(--admin-accent)]/18 text-[var(--admin-accent)] font-semibold"
|
||||||
style={
|
: "bg-transparent text-[var(--admin-text)] hover:bg-[var(--admin-accent)]/10"
|
||||||
isAdmin
|
}`
|
||||||
? { width: "calc(100% - 8px)" }
|
: `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
|
||||||
color: "var(--color-text-readable, var(--color-text))",
|
? "opacity-100"
|
||||||
background:
|
: "opacity-70 hover:opacity-100"
|
||||||
l.code === locale
|
}`
|
||||||
? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
|
}
|
||||||
: "none",
|
style={
|
||||||
width: "calc(100% - 8px)",
|
isAdmin
|
||||||
}
|
? undefined
|
||||||
}
|
: {
|
||||||
>
|
color: "var(--color-text-readable, var(--color-text))",
|
||||||
<Image
|
background: selected
|
||||||
src={`/assets/images/icons/flags/${l.code}.png`}
|
? "color-mix(in srgb, var(--color-primary) 12%, transparent)"
|
||||||
alt={l.lang}
|
: "transparent",
|
||||||
width={16}
|
}
|
||||||
height={16}
|
}
|
||||||
className="inline-block h-4 w-auto"
|
>
|
||||||
/>
|
<Image
|
||||||
{l.label}
|
src={`/assets/images/icons/flags/${l.code}.png`}
|
||||||
</button>
|
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>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Reference in new issue
Block a user