feat(SW-184): added main components for new header

components/Header/TopMenu/LanguageSwitcher/index.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { useState } from "react"
+
+import { ChevronDownIcon, GlobeIcon } from "@/components/Icons"
+
+import Button from "../Button"
+
+import styles from "./languageSwitcher.module.css"
+
+export default function LanguageSwitcher() {
+  const [isExpanded, setIsExpanded] = useState(false)
+
+  function handleButtonClick() {
+    setIsExpanded((prev) => !prev)
+  }
+
+  return (
+    <Button onClick={handleButtonClick}>
+      <GlobeIcon width={20} height={20} color="burgundy" />
+      <span>English</span>
+      <ChevronDownIcon
+        className={`${styles.chevron} ${isExpanded ? styles.isExpanded : ""}`}
+        width={20}
+        height={20}
+        color="burgundy"
+      />
+    </Button>
+  )
+}

components/Header/TopMenu/LanguageSwitcher/languageSwitcher.module.css

@@ -0,0 +1,17 @@
+.button {
+  background-color: transparent;
+  color: var(--Base-Text-High-contrast);
+  border-width: 0;
+  cursor: pointer;
+  display: flex;
+  gap: var(--Spacing-x1);
+  align-items: center;
+}
+
+.chevron {
+  transition: transform 0.2s;
+}
+
+.chevron.isExpanded {
+  transform: rotate(180deg);
+}