🌐 Fix the flags for internalization

package.json

@@ -49,6 +49,7 @@
 		"axios": "^0.27.2",
 		"consola": "^2.15.3",
 		"cookies-next": "^2.1.1",
+		"country-flag-icons": "^1.5.5",
 		"dayjs": "^1.11.5",
 		"dockerode": "^3.3.2",
 		"embla-carousel-react": "^7.0.0",

src/components/Settings/LanguageSwitch.tsx

@@ -1,5 +1,6 @@
-import { Group, Image, Select, Stack, Text } from '@mantine/core';
+import { Group, Select, Stack, Text } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
+import getUnicodeFlagIcon from 'country-flag-icons/unicode';
 
 import { forwardRef, useState } from 'react';
 import { useTranslation } from 'next-i18next';
@@ -20,7 +21,7 @@ export default function LanguageSwitch() {
     ? locales.map((localeItem) => ({
         value: localeItem,
         label: getLanguageByCode(localeItem).originalName,
-        image: `imgs/flags/${localeItem}.png`,
+        icon: getUnicodeFlagIcon(localeItem),
         language: getLanguageByCode(localeItem),
       }))
     : [];
@@ -56,20 +57,7 @@ export default function LanguageSwitch() {
   return (
     <Stack>
       <Select
-        icon={
-          <Image
-            width={30}
-            height={18}
-            src={`/imgs/flags/${selectedLanguage}.png`}
-            alt="country flag"
-            styles={{
-              root: {
-                borderRadius: 1.5,
-                overflow: 'hidden',
-              },
-            }}
-          />
-        }
+        icon={<Text>{getUnicodeFlagIcon(selectedLanguage as string)}</Text>}
         label={t('label')}
         data={data}
         itemComponent={SelectItem}
@@ -99,7 +87,7 @@ const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
   ({ language, image, ...others }: ItemProps, ref) => (
     <div ref={ref} {...others}>
       <Group noWrap>
-        <Image src={image} width={30} height={20} radius="xs" />
+        <Text>{getUnicodeFlagIcon(language.originalName as string)}</Text>
 
         <div>
           <Text size="sm">

yarn.lock

@@ -3145,6 +3145,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"country-flag-icons@npm:^1.5.5":
+  version: 1.5.5
+  resolution: "country-flag-icons@npm:1.5.5"
+  checksum: 367f38330a7f0f94836c7859575e1ae75655a04e2104ba060de75827d82bd84413fd7752c9166efa93123eb0d1dd1db1658ef22683511dcfa1c16f2caffe892d
+  languageName: node
+  linkType: hard
+
 "cpu-features@npm:~0.0.4":
   version: 0.0.4
   resolution: "cpu-features@npm:0.0.4"
@@ -4743,6 +4750,7 @@ __metadata:
     axios: ^0.27.2
     consola: ^2.15.3
     cookies-next: ^2.1.1
+    country-flag-icons: ^1.5.5
     dayjs: ^1.11.5
     dockerode: ^3.3.2
     embla-carousel-react: ^7.0.0