feat(WEB-102): language-switcher per page basis

components/Current/Header/LanguageSwitcher/Desktop/index.tsx

@@ -0,0 +1,82 @@
+"use client"
+import { useEffect, useRef, useState } from "react"
+
+import { languages } from "@/constants/languages"
+
+import styles from "./desktop.module.css"
+
+import type { LanguageSwitcherProps } from "@/types/components/current/languageSwitcher"
+
+export default function Desktop({
+  currentLanguage,
+  urls,
+}: LanguageSwitcherProps) {
+  const [isOpen, setIsOpen] = useState(false)
+  const divRef = useRef<HTMLDivElement>(null)
+
+  function toggleOpen() {
+    setIsOpen(prevIsOpen => !prevIsOpen)
+  }
+
+  function close() {
+    setIsOpen(false)
+  }
+
+  useEffect(() => {
+    function handleClickOutside(evt: Event) {
+      const target = evt.target as HTMLElement
+      if (divRef.current && target && !divRef.current.contains(target)) {
+        close()
+      }
+    }
+
+    if (divRef.current) {
+      document.addEventListener('click', handleClickOutside, false)
+    }
+    return () => {
+      document.removeEventListener('click', handleClickOutside, false)
+    }
+  }, [close])
+
+  return (
+    <div className="dropdown-container navbar-language-selector " ref={divRef}>
+      <button
+        aria-pressed="false"
+        className="navbar-language-selector__toggler"
+        data-js="dropdown-toggler"
+        onClick={toggleOpen}
+      >
+        <svg
+          focusable="false"
+          className="icon icon--xs icon--white"
+          viewBox="0 0 32 32"
+        >
+          <use xlinkHref="/Static/img/icons/sprites.svg#icon-globe"></use>
+        </svg>
+        {currentLanguage}
+        <span className="hidden--accessible">Choose language</span>
+        <span className="caret"></span>
+      </button>
+      <ul className={`${styles.dropdown} ${isOpen ? styles.isOpen : ""}`}>
+        <li className={currentLanguage === languages.en ? styles.active : undefined}>
+          <a className={styles.link} href={urls.en?.url}>{languages.en}</a>
+        </li>
+        <li className={currentLanguage === languages.sv ? styles.active : undefined}>
+          <a className={styles.link} href={urls.sv?.url}>{languages.sv}</a>
+        </li>
+        <li className={currentLanguage === languages.no ? styles.active : undefined}>
+          <a className={styles.link} href={urls.no?.url}>{languages.no}</a>
+        </li>
+        <li className={currentLanguage === languages.da ? styles.active : undefined}>
+          <a className={styles.link} href="https://www.scandichotels.dk/">{languages.da}</a>
+        </li>
+        <li className={currentLanguage === languages.fi ? styles.active : undefined}>
+          <a className={styles.link} href={urls.fi?.url}>{languages.fi}</a>
+        </li>
+        <li className={currentLanguage === languages.de ? styles.active : undefined}>
+          <a className={styles.link} href={urls.de?.url}>{languages.de}</a>
+        </li>
+      </ul>
+    </div>
+  )
+}