Merge pull request #17 from marbiano/fix-flag

Dynamic flag images

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>
                 )}

public/flag-en-us.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><circle cx="256" cy="256" r="256" fill="#f0f0f0"/><g fill="#d80027"><path d="M244.87 256H512c0-23.106-3.08-45.49-8.819-66.783H244.87V256zM244.87 122.435h229.556a257.35 257.35 0 00-59.07-66.783H244.87v66.783zM256 512c60.249 0 115.626-20.824 159.356-55.652H96.644C140.374 491.176 195.751 512 256 512zM37.574 389.565h436.852a254.474 254.474 0 0028.755-66.783H8.819a254.474 254.474 0 0028.755 66.783z"/></g><path d="M118.584 39.978h23.329l-21.7 15.765 8.289 25.509-21.699-15.765-21.699 15.765 7.16-22.037a257.407 257.407 0 00-49.652 55.337h7.475l-13.813 10.035a255.58 255.58 0 00-6.194 10.938l6.596 20.301-12.306-8.941a253.567 253.567 0 00-8.372 19.873l7.267 22.368h26.822l-21.7 15.765 8.289 25.509-21.699-15.765-12.998 9.444A258.468 258.468 0 000 256h256V0c-50.572 0-97.715 14.67-137.416 39.978zm9.918 190.422l-21.699-15.765L85.104 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zM220.328 230.4l-21.699-15.765L176.93 230.4l8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765 8.289 25.509zm-8.289-100.083l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765zm0-74.574l8.289 25.509-21.699-15.765-21.699 15.765 8.289-25.509-21.7-15.765h26.822l8.288-25.509 8.288 25.509h26.822l-21.7 15.765z" fill="#0052b4"/></svg>

public/flag-es.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 256c0 31.314 5.633 61.31 15.923 89.043L256 367.304l240.077-22.261C506.367 317.31 512 287.314 512 256s-5.633-61.31-15.923-89.043L256 144.696 15.923 166.957C5.633 194.69 0 224.686 0 256z" fill="#ffda44"/><g fill="#d80027"><path d="M496.077 166.957C459.906 69.473 366.071 0 256 0S52.094 69.473 15.923 166.957h480.154zM15.923 345.043C52.094 442.527 145.929 512 256 512s203.906-69.473 240.077-166.957H15.923z"/></g></svg>