add language switcher and modal

locale/en.json

@@ -14,6 +14,11 @@
         "placeholder": "categories, pornostars, etc...",
         "submit": "Search"
     },
+    "Settings": {
+        "lang_title": "Please select language",
+        "lang_it": "Italian",
+        "lang_en": "English"
+    },
     "Results": {
         "query": "Search results for: {{ query }}",
         "toggle": "Show preview",

locale/it.json

@@ -14,6 +14,11 @@
         "placeholder": "categorie, pornostar, ecc...",
         "submit": "Cerca"
     },
+    "Settings": {
+        "lang_title": "Seleziona la lingua",
+        "lang_it": "Italiano",
+        "lang_en": "Inglese"
+    },
     "Results": {
         "query": "Risultati della ricerca per: {{ query }}",
         "toggle": "Mostra anteprime risultati",

src/components/Layout/Header/Menu/LangSwitcher/LangSwitcher.module.scss

@@ -0,0 +1,33 @@
+@import 'spacing';
+
+.container {
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .close {
+            cursor: pointer;
+        }
+    }
+
+    .content {
+        display: flex;
+        flex-direction: row;
+    
+        .lang {
+            cursor: pointer;
+            border: 1px solid var(--primary);
+            padding: $spacing_8;
+            border-radius: $spacing_8;
+            margin-right: $spacing_16;
+        }
+    
+        .lang:hover {
+            background-color: var(--primary);
+            color: var(--primary-inverse);
+        }
+    }
+}
+

src/components/Layout/Header/Menu/LangSwitcher/index.tsx

@@ -0,0 +1,52 @@
+'use client'
+
+import React from 'react';
+
+import { IoCloseCircleOutline } from "react-icons/io5";
+
+import style from './LangSwitcher.module.scss'
+
+import { useRouter } from "next/navigation";
+
+import { LangOption } from '@/meta/settings';
+
+interface Props {
+  handleClose(): void
+  labels: {
+    title: string
+    langs: LangOption[]
+  }
+}
+
+const LangSwitcher: React.FC<Props> = (props) => {
+
+  const { labels, handleClose } = props
+
+  const router = useRouter();
+
+  const setOption = (option: LangOption) => {
+    router.push(`/${option.code}`);
+  };
+
+  return (
+    <dialog open>
+      <article className={style.container}>
+        <header className={style.header}>
+          <div className={style.title}>{labels.title}</div>
+          <div className={style.close} onClick={() => { handleClose() }}><IoCloseCircleOutline size={24} /></div>
+        </header>
+        <p className={style.content}>{labels.langs.map((elem, key) =>
+          <span className={style.lang} onMouseDown={(e) => {
+            e.preventDefault();
+            setOption(elem);
+            handleClose();
+          }} key={key}>{elem.label}</span>
+        )}
+        </p>
+      </article>
+    </dialog >
+
+  );
+};
+
+export default LangSwitcher;

src/components/Layout/Header/Menu/Language/index.tsx

@@ -1,18 +1,38 @@
 'use client'
 
-import React from 'react';
+import React, { useState } from 'react';
 
 import { IoLanguage } from 'react-icons/io5';
 
+import { LangOption } from '@/meta/settings';
+
 import Icon from '../Icon';
 
-const Menu: React.FC = () => {
+import LangSwitcher from '../LangSwitcher';
+
+interface Props {
+    labels: {
+        title: string
+        langs: LangOption[]
+    }
+}
+
+const Language: React.FC<Props> = (props) => {
+
+    const { labels } = props
+
+    const [showModal, setShowModal] = useState<boolean>(false)
 
     return (
-        <Icon handleClick={() => {}}>
+        <>
+            <Icon handleClick={() => setShowModal(true)}>
                 {<IoLanguage size={24} />}
             </Icon>
+
+            {showModal && <LangSwitcher handleClose={() => setShowModal(false)} labels={labels} />}
+
+        </>
     );
 };
 
-export default Menu;
+export default Language;

src/components/Layout/Header/Menu/index.tsx

@@ -1,15 +1,32 @@
 import React from 'react';
 
+import { useTranslations } from 'next-intl';
+
 import style from './Menu.module.scss'
 
 import Theme from './Theme';
 import Repo from './Repo';
+import Language from './Language';
+import { LangOption } from '@/meta/settings';
 
 const Menu: React.FC = () => {
 
+    const t = useTranslations('Settings');
+
+    const options: LangOption[] = [
+        { label: t('lang_en'), code: "en" },
+        { label: t('lang_it'), code: "it" },
+      ];
+    
+    const languageLabels = {
+        title: t('lang_title'),
+        langs: options
+    }
+
     return (
         <div className={style.container}>
             <Repo />
+            <Language labels={languageLabels} />
             <Theme />
         </div>
     );

src/meta/settings.ts

@@ -2,3 +2,8 @@ export enum Themes {
     light= 'light',
     dark= 'dark'
 }
+
+export interface LangOption {
+    label: string;
+    code: string;
+}