-
+
+
setSearch(e.target.value)}
- className="flex-1 bg-transparent outline-none text-sm"
- style={{ border: "none", padding: 0, margin: 0 }}
+ className="flex-1 bg-transparent outline-none text-sm border-0 p-0 m-0 text-inherit"
/>
{filtered.length === 0 && (
- Geen talen gevonden
+ No languages found
)}
{filtered.map((l) => (
@@ -132,33 +155,27 @@ export function LanguageSwitcher() {
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-all duration-100 rounded-lg mx-1 ${
+ 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
- ? "opacity-100"
- : "opacity-70 hover:opacity-100"
+ ? 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={{
- color: "var(--color-text-readable, var(--color-text))",
- background:
- l.code === locale
- ? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
- : "none",
- border: "none",
- cursor: "pointer",
- width: "calc(100% - 8px)",
- }}
- onMouseEnter={(e) => {
- e.currentTarget.style.backgroundColor =
- "color-mix(in srgb, var(--color-primary) 10%, transparent)";
- e.currentTarget.style.color = "var(--color-primary)";
- }}
- onMouseLeave={(e) => {
- e.currentTarget.style.backgroundColor =
- l.code === locale
- ? "color-mix(in srgb, var(--color-primary) 10%, transparent)"
- : "transparent";
- e.currentTarget.style.color = "var(--color-text)";
- }}
+ 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)",
+ }
+ }
>