close settings modal on change

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

@@ -10,6 +10,7 @@ import { setCookie } from '@/utils/cookies/write';
 import { useCookies } from 'react-cookie';
 
 interface Props {
+    handleClose(): void
     labels: {
         title: string,
     }
@@ -17,7 +18,7 @@ interface Props {
 
 const Orientation: React.FC<Props> = (props) => {
 
-    const { labels } = props
+    const { labels, handleClose } = props
     
     const [cookies] = useCookies([Cookies.orientation]);
 
@@ -25,6 +26,8 @@ const Orientation: React.FC<Props> = (props) => {
         const value = event.target.value;
 
         await setCookie(Cookies.orientation, value)
+
+        handleClose()
     }
 
     return (

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

@@ -10,6 +10,7 @@ import { setCookie } from '@/utils/cookies/write';
 import { useCookies } from 'react-cookie';
 
 interface Props {
+    handleClose(): void
     labels: {
         title: string,
     }
@@ -17,7 +18,7 @@ interface Props {
 
 const Platform: React.FC<Props> = (props) => {
 
-    const { labels } = props
+    const { labels, handleClose } = props
     
     const [cookies] = useCookies([Cookies.platform]);
 
@@ -25,6 +26,8 @@ const Platform: React.FC<Props> = (props) => {
         const value = event.target.value;
 
         await setCookie(Cookies.platform, value)
+
+        handleClose()
     }
 
     return (

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

@@ -29,8 +29,8 @@ const LangSwitcher: React.FC<Props> = (props) => {
           <div className={style.close} onClick={() => { handleClose() }}><IoCloseCircleOutline size={24} /></div>
         </header>
         <div className={style.content}>
-          <Platform labels={{ title: labels.platform.title }} />
-          <Orientation labels={{ title: labels.orientation.title }} />
+          <Platform handleClose={handleClose} labels={{ title: labels.platform.title }} />
+          <Orientation handleClose={handleClose} labels={{ title: labels.orientation.title }} />
         </div>
       </article>
     </dialog >