Minor Site Update

app/[locale]/Footer.tsx

@@ -1,6 +1,7 @@
 import { useTranslations } from "next-intl";
 import Link from "next/link";
-import { JSX, SVGProps } from "react";
+import { JSX, SVGProps, Suspense } from "react";
+import LanguagePickerWrapper from "@/components/LanguagePickerWrapper";
 
 export default function Footer() {
   const tFooter = useTranslations("footer");
@@ -169,19 +170,21 @@ export default function Footer() {
           className="flex flex-wrap justify-center items-center gap-10"
           aria-label={tFooter("footer")}
         >
-          {navigation.main.map((item) => (
-            <div
-              key={item.name}
-              className="pb-6"
-            >
-              <Link
-                href={item.href}
-                className="text-sm leading-6"
+          <div className="flex items-center gap-4">
+            {navigation.main.map((item) => (
+              <div
+                key={item.name}
+                className="pb-6"
               >
-                {item.name}
-              </Link>
-            </div>
-          ))}
+                <Link
+                  href={item.href}
+                  className="text-sm leading-6"
+                >
+                  {item.name}
+                </Link>
+              </div>
+            ))}
+          </div>
         </nav>
         <div className="mt-6 flex flex-wrap justify-center items-center gap-y-6 gap-x-6">
           {navigation.social.map((item) => (
@@ -195,6 +198,11 @@ export default function Footer() {
             </Link>
           ))}
         </div>
+        <div className="mt-12 flex justify-center items-center">
+          <Suspense fallback={<div className="w-[180px]" />}>
+            <LanguagePickerWrapper />
+          </Suspense>
+        </div>
         <p className="mt-10 text-center text-xs leading-5">
           {tFooter("disclaimer")}
         </p>

components/LanguagePicker.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { useLocale } from "next-intl";
+import { usePathname } from "next/navigation";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import Cookies from "js-cookie";
+import { Globe } from "lucide-react";
+
+type LanguagePickerProps = {
+  availableLanguages: string[];
+};
+
+const languageNames: Record<string, string> = {
+  "af-ZA": "Afrikaans",
+  "ar-SA": "العربية",
+  "ca-ES": "Català",
+  "cs-CZ": "Čeština",
+  "da-DK": "Dansk",
+  "de-DE": "Deutsch",
+  "el-GR": "Ελληνικά",
+  en: "English",
+  "es-ES": "Español",
+  "fa-IR": "فارسی",
+  "fi-FI": "Suomi",
+  "fr-FR": "Français",
+  "he-IL": "עברית",
+  "hi-IN": "हिन्दी",
+  "hu-HU": "Magyar",
+  "id-ID": "Bahasa Indonesia",
+  "it-IT": "Italiano",
+  "ja-JP": "日本語",
+  "ko-KR": "한국어",
+  "nl-NL": "Nederlands",
+  "no-NO": "Norsk",
+  "pl-PL": "Polski",
+  "pt-BR": "Português (Brasil)",
+  "pt-PT": "Português",
+  "ro-RO": "Română",
+  "ru-RU": "Русский",
+  "sr-SP": "Српски",
+  "sv-SE": "Svenska",
+  "ta-IN": "தமிழ்",
+  "tr-TR": "Türkçe",
+  "uk-UA": "Українська",
+  "vi-VN": "Tiếng Việt",
+  "zh-CN": "简体中文",
+  "zh-TW": "繁體中文",
+};
+
+export default function LanguagePicker({
+  availableLanguages,
+}: LanguagePickerProps) {
+  const locale = useLocale();
+  const pathname = usePathname();
+
+  const handleLanguageChange = (newLocale: string) => {
+    Cookies.set("NEXT_LOCALE", newLocale, { path: "/" });
+
+    const segments = pathname.split("/").filter(Boolean);
+    const pathWithoutLocale =
+      segments.length > 1 ? `/${segments.slice(1).join("/")}` : "/";
+
+    const newPath =
+      newLocale === "en"
+        ? pathWithoutLocale
+        : `/${newLocale}${pathWithoutLocale}`;
+
+    window.location.href = newPath;
+  };
+
+  return (
+    <Select
+      defaultValue={locale}
+      onValueChange={handleLanguageChange}
+    >
+      <SelectTrigger className="w-[180px]">
+        <Globe className="mr-2 h-4 w-4" />
+        <SelectValue placeholder="Select language" />
+      </SelectTrigger>
+      <SelectContent>
+        {availableLanguages.map((lang) => (
+          <SelectItem
+            key={lang}
+            value={lang}
+          >
+            {languageNames[lang] || lang}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}

components/LanguagePickerWrapper.tsx

@@ -0,0 +1,8 @@
+import { getAvailableLanguages } from "@/lib/i18n/getAvailableLanguages";
+import LanguagePicker from "./LanguagePicker";
+
+export default async function LanguagePickerWrapper() {
+  const availableLanguages = await getAvailableLanguages();
+
+  return <LanguagePicker availableLanguages={availableLanguages} />;
+}

components/ui/select.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cn } from "@/lib/utils";
+import {
+  CheckIcon,
+  ChevronDownIcon,
+  ChevronUpIcon,
+} from "@radix-ui/react-icons";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDownIcon className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUpIcon className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDownIcon className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}
+    >
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}
+      >
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <CheckIcon className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};

lib/i18n/getAvailableLanguages.ts

@@ -0,0 +1,50 @@
+import { availableLanguages } from "@/config/i18nProperties";
+
+interface CrowdinLanguageProgress {
+  data: Array<{
+    data: {
+      languageId: string;
+      translationProgress: number;
+    };
+  }>;
+}
+
+export async function getAvailableLanguages(
+  threshold: number = 75
+): Promise<string[]> {
+  try {
+    if (!process.env.CROWDIN_PROJECT_ID || !process.env.CROWDIN_API_TOKEN) {
+      return [...availableLanguages];
+    }
+
+    const response = await fetch(
+      `https://api.crowdin.com/api/v2/projects/${process.env.CROWDIN_PROJECT_ID}/languages/progress`,
+      {
+        headers: {
+          Authorization: `Bearer ${process.env.CROWDIN_API_TOKEN}`,
+          "Content-Type": "application/json",
+        },
+        next: { revalidate: 3600 },
+      }
+    );
+
+    if (!response.ok) {
+      return [...availableLanguages];
+    }
+
+    const data: CrowdinLanguageProgress = await response.json();
+
+    const qualifiedLanguages = data.data
+      .filter((item) => item.data.translationProgress >= threshold)
+      .map((item) => {
+        return availableLanguages.find((locale) =>
+          locale.startsWith(item.data.languageId)
+        );
+      })
+      .filter(Boolean) as string[];
+
+    return [...new Set(["en", ...qualifiedLanguages])].sort();
+  } catch (error) {
+    return [...availableLanguages];
+  }
+}