Add support for dynamic flags images and alts

components/core/I18nWidget/I18nWidget.tsx

@@ -6,21 +6,47 @@ import { Menu } from '@headlessui/react'
 import { DoubleChevron } from '@components/icons'
 import s from './I18nWidget.module.css'
 
-const LOCALES_MAP: Record<string, string> = {
-  es: 'Español',
-  'en-US': 'English',
+interface LOCALE_DATA {
+  name: string
+  img: {
+    filename: string
+    alt: string
+  }
+}
+
+const LOCALES_MAP: Record<string, LOCALE_DATA> = {
+  es: {
+    name: 'Español',
+    img: {
+      filename: 'flag-es.svg',
+      alt: 'Bandera española',
+    },
+  },
+  'en-US': {
+    name: 'English',
+    img: {
+      filename: 'flag-en-us.svg',
+      alt: 'US Flag',
+    },
+  },
 }
 
 const I18nWidget: FC = () => {
   const { locale, locales, defaultLocale = 'en-US' } = useRouter()
   const options = locales?.filter((val) => val !== locale)
 
+  const currentLocale = locale || defaultLocale
+
   return (
     <nav className={s.root}>
       <Menu>
         <Menu.Button className={s.button} aria-label="Language selector">
-          <img className="mr-2" src="/flag-us.png" alt="US Flag" />
-          <span className="mr-2">{LOCALES_MAP[locale || defaultLocale]}</span>
+          <img
+            className="block mr-2 w-5"
+            src={`/${LOCALES_MAP[currentLocale].img.filename}`}
+            alt={LOCALES_MAP[currentLocale].img.alt}
+          />
+          <span className="mr-2">{LOCALES_MAP[currentLocale].name}</span>
           {options && (
             <span>
               <DoubleChevron />
@@ -35,7 +61,7 @@ const I18nWidget: FC = () => {
                 {({ active }) => (
                   <Link href="/" locale={locale}>
                     <a className={cn(s.item, { [s.active]: active })}>
-                      {LOCALES_MAP[locale]}
+                      {LOCALES_MAP[locale].name}
                     </a>
                   </Link>
                 )}