Add Flag Icons and Improve Locale Switcher

package.json

@@ -104,6 +104,7 @@
     "dotenv": "^16.3.1",
     "drizzle-orm": "^0.28.5",
     "embla-carousel-react": "8.0.0-rc12",
+    "flag-icons": "^6.11.0",
     "lucide-react": "^0.269.0",
     "mysql2": "^3.6.0",
     "next": "13.4.19",

src/data/i18n/client.ts

@@ -4,5 +4,10 @@ import { createI18nClient } from "next-international/client";
 
 import { locales } from "~/data/i18n";
 
-export const { useI18n, useScopedI18n, I18nProviderClient } =
-  createI18nClient(locales);
+export const {
+  useI18n,
+  useScopedI18n,
+  I18nProviderClient,
+  useChangeLocale,
+  useCurrentLocale
+} = createI18nClient(locales);

src/data/i18n/index.ts

@@ -7,4 +7,11 @@ type LocalesKeys = keyof typeof locales;
 
 export const localeList = Object.keys(locales) as LocalesKeys[];
 
+const allLocales = {
+  en: "en",
+  uk: "uk"
+} as const;
+
+export const LOCALES: typeof allLocales = allLocales;
+
 export const defaultLocale = "en" as const satisfies keyof typeof locales;

src/islands/switchers/locale-switcher.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import { Moon, Sun } from "lucide-react";
-import { useTheme } from "next-themes";
+import { useChangeLocale, useCurrentLocale } from "~/data/i18n/client";
 
+import "/node_modules/flag-icons/css/flag-icons.min.css";
+
+import { LOCALES } from "~/data/i18n";
 import { useIsClient } from "~/hooks/use-is-client";
 import { Button, type ButtonProps } from "~/islands/primitives/button";
 import {
@@ -18,12 +20,13 @@ export type LocaleSwitcherProps = ButtonProps & {
 };
 
 export function LocaleSwitcher({
-  iconClassName = "mr-2 h-4 w-4",
+  iconClassName = "mr-2",
   className,
   ...props
 }: LocaleSwitcherProps) {
-  const { setTheme } = useTheme();
   const client = useIsClient();
+  const changeLocale = useChangeLocale();
+  const currentLocale = useCurrentLocale();
 
   if (!client)
     return (
@@ -35,12 +38,9 @@ export function LocaleSwitcher({
         size="icon"
         {...props}
       >
-        <span className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0">
-          🇬🇧
-        </span>
-        <span className="absolute h-4 w-4 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100">
-          🇺🇦
-        </span>
+        <span
+          className={`fi fi-${currentLocale === LOCALES.en ? "gb" : "ua"}`}
+        ></span>
       </Button>
     );
 
@@ -54,27 +54,24 @@ export function LocaleSwitcher({
           size="icon"
           {...props}
         >
-          <span className="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0">
-            🇬🇧
-          </span>
-          <span className="absolute h-4 w-4 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100">
-            🇺🇦
-          </span>
+          <span
+            className={`fi fi-${currentLocale === LOCALES.en ? "gb" : "ua"}`}
+          ></span>
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
         <DropdownMenuItem className="font-heading">Language</DropdownMenuItem>
         <DropdownMenuSeparator />
         {/* TODO: Use icons instead. Flags emoji are doen't play nice with Windows. */}
-        <DropdownMenuItem onClick={() => setTheme("light")}>
+        <DropdownMenuItem onClick={() => changeLocale(LOCALES.en)}>
           <span aria-hidden="true" className={iconClassName}>
-            🇬🇧
+            <span className="fi fi-gb"></span>
           </span>
           <span>English</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme("dark")}>
+        <DropdownMenuItem onClick={() => changeLocale(LOCALES.uk)}>
           <span aria-hidden="true" className={iconClassName}>
-            🇺🇦
+            <span className="fi fi-ua"></span>
           </span>
           <span>Ukrainian</span>
         </DropdownMenuItem>