🇻🇳 Add Vietnamese Language (#581)

apps/web/src/components/poll/language-selector.tsx

@@ -3,6 +3,7 @@ import Cookies from "js-cookie";
 import { useTranslation } from "next-i18next";
 
 import ChevronDown from "@/components/icons/chevron-down.svg";
+import languages from "~/languages.json";
 
 export const LanguageSelect: React.FunctionComponent<{
   className?: string;
@@ -21,26 +22,11 @@ export const LanguageSelect: React.FunctionComponent<{
           onChange?.(e.target.value);
         }}
       >
-        <option value="en">English</option>
-        <option value="ca">Català</option>
-        <option value="cs">Česky</option>
-        <option value="zh">汉语</option>
-        <option value="da">Dansk</option>
-        <option value="de">Deutsch</option>
-        <option value="es">Español</option>
-        <option value="fi">Suomi</option>
-        <option value="fr">Français</option>
-        <option value="hr">Hrvatski</option>
-        <option value="it">Italiano</option>
-        <option value="ko">한국어</option>
-        <option value="hu">Magyar</option>
-        <option value="nl">Nederlands</option>
-        <option value="pl">Polski</option>
-        <option value="pt">Português</option>
-        <option value="pt-BR">Português - Brasil</option>
-        <option value="ru">Pусский</option>
-        <option value="sk">Slovenčina</option>
-        <option value="sv">Svenska</option>
+        {Object.entries(languages).map(([code, name]) => (
+          <option key={code} value={code}>
+            {name}
+          </option>
+        ))}
       </select>
       <div className="pointer-events-none absolute inset-y-0 right-2 flex items-center">
         <ChevronDown className="w-5" />

apps/web/src/middleware.ts

@@ -21,6 +21,7 @@ const supportedLocales = [
   "ru",
   "sk",
   "sv",
+  "vi",
   "zh",
 ];
 

apps/web/src/utils/dayjs.tsx

@@ -126,6 +126,11 @@ const dayjsLocales: Record<
     timeFormat: "24h",
     import: () => import("dayjs/locale/zh"),
   },
+  vi: {
+    weekStartsOn: "monday",
+    timeFormat: "24h",
+    import: () => import("dayjs/locale/vi"),
+  },
 };
 
 dayjs.extend(localizedFormat);