add base Icon component and language icon (wip)

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

@@ -0,0 +1,8 @@
+@import 'spacing';
+
+.container {
+    cursor: pointer;
+    width: $spacing_24;
+    height: $spacing_24;
+    margin-left: $spacing_16;
+}

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

@@ -0,0 +1,23 @@
+'use client'
+
+import React, { PropsWithChildren } from 'react';
+
+import style from './Icon.module.scss';
+
+
+interface Props {
+    handleClick():void
+}
+
+const Menu: React.FC<Props & React.PropsWithChildren> = (props) => {
+
+    const { handleClick, children } = props
+
+    return (
+        <div onClick={handleClick} className={style.container}>
+            {children}
+        </div>
+    );
+};
+
+export default Menu;

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

@@ -0,0 +1,18 @@
+'use client'
+
+import React from 'react';
+
+import { IoLanguage } from 'react-icons/io5';
+
+import Icon from '../Icon';
+
+const Menu: React.FC = () => {
+
+    return (
+        <Icon handleClick={() => {}}>
+            {<IoLanguage size={24} />}
+        </Icon>
+    );
+};
+
+export default Menu;

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

@@ -1,5 +1,6 @@
 @import 'spacing';
 
 .container {
-    width: $spacing_24;
+    display: flex;
+    flex-direction: row;
 }

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

@@ -1,3 +0,0 @@
-.container {
-    cursor: pointer;    
-}

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

@@ -2,23 +2,23 @@
 
 import React from 'react';
 
-import style from './Theme.module.scss';
-
 import { TbMoon, TbSun } from 'react-icons/tb';
 import { useAppDispatch, useAppSelector } from '@/store/store';
 import { Themes } from '@/meta/settings';
 import { setCurrentTheme } from '@/store/settingsSlice';
 
+import Icon from '../Icon';
+
 const Menu: React.FC = () => {
 
     const theme = useAppSelector((state) => state.settings.theme);
     const dispatch = useAppDispatch();
 
     return (
-        <div onClick={() => dispatch(setCurrentTheme(theme == Themes.dark ? Themes.light : Themes.dark))} className={style.container}>
+        <Icon handleClick={() => dispatch(setCurrentTheme(theme == Themes.dark ? Themes.light : Themes.dark))}>
             {theme == Themes.dark && <TbMoon size={24} />}
             {theme == Themes.light && <TbSun size={24} />}
-        </div>
+        </Icon>
     );
 };
 

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

@@ -1,11 +1,17 @@
 import React from 'react';
 
+import style from './Menu.module.scss'
+
 import Theme from './Theme';
+import Language from './Language';
 
 const Menu: React.FC = () => {
 
     return (
-        <Theme />
+        <div className={style.container}>
+            <Language />
+            <Theme />
+        </div>
     );
 };
 

src/styles/_spacing.scss

@@ -1,6 +1,7 @@
 $spacing_4: 4px;
 $spacing_8: 8px;
 $spacing_16: 16px;
+$spacing_24: 24px;
 $spacing_32: 32px;
 $spacing_48: 48px;
 $spacing_64: 64px;