🎨 udpate localization switch (#2499)

equinor · Sep 11, 2024 · 105f369 · 105f369
1 parent f25c9bb
commit 105f369
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/sanityv3/schemas/textSnippets.ts b/sanityv3/schemas/textSnippets.ts
@@ -744,6 +744,11 @@ const snippets: textSnippet = {
     defaultValue: 'Close',
     group: groups.others,
   },
+  switch_to: {
+    title: 'Switch to',
+    defaultValue: 'Switch to',
+    group: groups.others,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }

diff --git a/web/pageComponents/shared/LocalizationSwitch.tsx b/web/pageComponents/shared/LocalizationSwitch.tsx
@@ -1,3 +1,4 @@
+import { useIntl } from 'react-intl'
 import { languages } from '../../languages'
 import { ButtonLink } from '@core/Link'
 
@@ -9,34 +10,42 @@ export type LocalizationSwitchProps = {
 }
 
 export const LocalizationSwitch = ({ allSlugs: slugs, activeLocale, ...rest }: LocalizationSwitchProps) => {
+  const intl = useIntl()
+
   if (slugs.length < 1) return null
 
   return (
-    <div className="flex items-center md:divide-x md:divide-dashed md:divide-gray-400 " {...rest}>
+    <ul className="flex items-center md:divide-x md:divide-dashed md:divide-gray-400 " {...rest}>
       {slugs.map((obj) => {
         const language = languages.find((lang) => lang.name === obj.lang)
         return (
-          <div
+          <li
             className={`flex items-center ${activeLocale === String(language?.locale) ? 'hidden md:block' : ''} `}
             key={obj.lang}
           >
             <ButtonLink
               variant="ghost"
               href={obj.slug}
               locale={`${language?.locale}`}
-              className={`flex flex-col gap-0 items-stretch px-2 text-xs`}
+              className={`
+                ${activeLocale === String(language?.locale) ? 'hidden md:block' : ''}
+                flex flex-col gap-0 items-stretch px-2 text-xs
+                `}
             >
-              <span className="sr-only">{`Switch to ${language?.title}`}</span>
+              <span className="sr-only">{`${intl.formatMessage({
+                id: 'switch_to',
+                defaultMessage: 'Switch to',
+              })} ${language?.title}`}</span>
               <span
                 aria-hidden
                 className={`uppercase ${activeLocale === String(language?.locale) ? 'font-bold' : 'font-normal'}`}
               >
                 {language?.locale}
               </span>
             </ButtonLink>
-          </div>
+          </li>
         )
       })}
-    </div>
+    </ul>
   )
 }