add settings icon and modal

locale/en.json

@@ -22,7 +22,8 @@
     "Settings": {
         "lang_title": "Please select language",
         "lang_it": "Italian",
-        "lang_en": "English"
+        "lang_en": "English",
+        "settings_title": "Settings"
     },
     "Results": {
         "query": "Search results for: {{ query }}",

locale/it.json

@@ -22,7 +22,8 @@
     "Settings": {
         "lang_title": "Seleziona la lingua",
         "lang_it": "Italiano",
-        "lang_en": "Inglese"
+        "lang_en": "Inglese",
+        "settings_title": "Impostazioni"
     },
     "Results": {
         "query": "Risultati della ricerca per: {{ query }}",

src/components/Layout/Header/Menu/Settings/Modal/Modal.module.scss

@@ -0,0 +1,20 @@
+@import 'spacing';
+
+.container {
+
+    .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .close {
+            cursor: pointer;
+        }
+    }
+
+    .content {
+        display: flex;
+        flex-direction: row;
+    }
+}
+

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

@@ -0,0 +1,36 @@
+'use client'
+
+import React from 'react';
+
+import { IoCloseCircleOutline } from "react-icons/io5";
+
+import style from './Modal.module.scss'
+
+interface Props {
+  handleClose(): void
+  labels: {
+    title: string
+  }
+}
+
+const LangSwitcher: React.FC<Props> = (props) => {
+
+  const { labels, handleClose } = props
+
+  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}>
+            SETTINGS
+        </p>
+      </article>
+    </dialog >
+
+  );
+};
+
+export default LangSwitcher;

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

@@ -0,0 +1,31 @@
+'use client'
+
+import React, { useState } from 'react';
+
+import { IoSettingsOutline } from 'react-icons/io5';
+
+import Icon from '../Icon';
+import Modal from './Modal';
+
+interface Props {
+    labels: any
+}
+
+const Settings: React.FC<Props> = (props) => {
+
+    const { labels } = props
+
+    const [showModal, setShowModal] = useState<boolean>(false)
+
+    return (
+        <>
+            <Icon handleClick={() => setShowModal(true)}>
+                {<IoSettingsOutline size={24} />}
+            </Icon>
+
+            {showModal && <Modal handleClose={() => setShowModal(false)} labels={labels} />}
+        </>
+    );
+};
+
+export default Settings;

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

@@ -8,6 +8,7 @@ import Theme from './Theme';
 import Repo from './Repo';
 import Language from './Language';
 import { LangOption } from '@/meta/settings';
+import Settings from './Settings';
 
 const Menu: React.FC = () => {
 
@@ -23,11 +24,16 @@ const Menu: React.FC = () => {
         langs: options
     }
 
+    const settingsLabels = {
+        title: t('settings_title'),
+    }
+
     return (
         <div className={style.container}>
             <Repo />
             <Language labels={languageLabels} />
             <Theme />
+            <Settings labels={settingsLabels} />
         </div>
     );
 };