3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-06-09 06:01:49 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Add dropdown indicator to language selector (#552)

Browse source
This commit is contained in:
Jonas Höbenreich 2023-03-13 13:22:32 +01:00 • committed by GitHub
parent 39a07558ee
commit 5b78093c6f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 38 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

69
apps/web/src/components/poll/language-selector.tsx
View file

@ -2,42 +2,49 @@ import clsx from "clsx";
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { useTranslation } from "next-i18next"; import { useTranslation } from "next-i18next";
import ChevronDown from "@/components/icons/chevron-down.svg";
export const LanguageSelect: React.FunctionComponent<{ export const LanguageSelect: React.FunctionComponent<{
className?: string; className?: string;
onChange?: (language: string) => void; onChange?: (language: string) => void;
}> = ({ className, onChange }) => { }> = ({ className, onChange }) => {
const { i18n } = useTranslation("common"); const { i18n } = useTranslation("common");
return ( return (
<select <div className="relative">
className={clsx("input", className)} <select
defaultValue={i18n.language} className={clsx("input block pr-4", className)}
onChange={(e) => { defaultValue={i18n.language}
Cookies.set("NEXT_LOCALE", e.target.value, { onChange={(e) => {
expires: 365, Cookies.set("NEXT_LOCALE", e.target.value, {
}); expires: 365,
onChange?.(e.target.value); });
}} onChange?.(e.target.value);
> }}
<option value="en">English</option> >
<option value="ca">Català</option> <option value="en">English</option>
<option value="cs">Česky</option> <option value="ca">Català</option>
<option value="zh">汉语</option> <option value="cs">Česky</option>
<option value="da">Dansk</option> <option value="zh">汉语</option>
<option value="de">Deutsch</option> <option value="da">Dansk</option>
<option value="es">Español</option> <option value="de">Deutsch</option>
<option value="fi">Suomi</option> <option value="es">Español</option>
<option value="fr">Français</option> <option value="fi">Suomi</option>
<option value="hr">Hrvatski</option> <option value="fr">Français</option>
<option value="it">Italiano</option> <option value="hr">Hrvatski</option>
<option value="ko">한국어</option> <option value="it">Italiano</option>
<option value="hu">Magyar</option> <option value="ko">한국어</option>
<option value="nl">Nederlands</option> <option value="hu">Magyar</option>
<option value="pl">Polski</option> <option value="nl">Nederlands</option>
<option value="pt">Português</option> <option value="pl">Polski</option>
<option value="pt-BR">Português - Brasil</option> <option value="pt">Português</option>
<option value="ru">Pусский</option> <option value="pt-BR">Português - Brasil</option>
<option value="sk">Slovenčina</option> <option value="ru">Pусский</option>
<option value="sv">Svenska</option> <option value="sk">Slovenčina</option>
</select> <option value="sv">Svenska</option>
</select>
<div className="pointer-events-none absolute inset-y-0 right-2 flex items-center">
<ChevronDown className="w-5" />
</div>
</div>
); );
}; };