feat(SW-187): Fixed LanguageSwitcher for footer

components/LanguageSwitcher/index.tsx

@@ -10,6 +10,7 @@ import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
 import useLang from "@/hooks/useLang"
 
 import LanguageSwitcherContent from "./LanguageSwitcherContent"
+import { languageSwitcherVariants } from "./variants"
 
 import styles from "./languageSwitcher.module.css"
 
@@ -21,16 +22,29 @@ export default function LanguageSwitcher({
 }: LanguageSwitcherProps) {
   const intl = useIntl()
   const currentLanguage = useLang()
-  const { toggleLanguageSwitcher, isLanguageSwitcherOpen } = useDropdownStore()
+  const {
+    toggleLanguageSwitcher,
+    isHeaderLanguageSwitcherOpen,
+    isFooterLanguageSwitcherOpen,
+  } = useDropdownStore()
+
+  const position = type === "footer" ? "footer" : "header"
+  const color = type === "footer" ? "pale" : "burgundy"
+  const isLanguageSwitcherOpen =
+    type === "footer"
+      ? isFooterLanguageSwitcherOpen
+      : isHeaderLanguageSwitcherOpen
 
   useHandleKeyUp((event: KeyboardEvent) => {
     if (event.key === "Escape" && isLanguageSwitcherOpen) {
-      toggleLanguageSwitcher()
+      toggleLanguageSwitcher(position)
     }
   })
 
+  const classNames = languageSwitcherVariants({ color, position })
+
   return (
-    <div className={styles.languageSwitcher}>
+    <div className={classNames}>
       <button
         type="button"
         className={styles.button}
@@ -39,15 +53,15 @@ export default function LanguageSwitcher({
             ? "Close language menu"
             : "Open language menu",
         })}
-        onClick={toggleLanguageSwitcher}
+        onClick={() => toggleLanguageSwitcher(position)}
       >
-        <GlobeIcon width={20} height={20} color="burgundy" />
+        <GlobeIcon width={20} height={20} color={color} />
         <span>{languages[currentLanguage]}</span>
         <ChevronDownIcon
           className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
           width={20}
           height={20}
-          color="burgundy"
+          color={color}
         />
       </button>