add gender categories

locale/en.json

@@ -24,7 +24,8 @@
         "lang_it": "Italian",
         "lang_en": "English",
         "settings_title": "Settings",
-        "platform_title": "Platform:"
+        "platform_title": "Platform:",
+        "category_title": "Category:"
     },
     "Results": {
         "query": "Search results for: {{ query }}",

locale/it.json

@@ -24,7 +24,8 @@
         "lang_it": "Italiano",
         "lang_en": "Inglese",
         "settings_title": "Impostazioni",
-        "platform_title": "Piattaforma:"
+        "platform_title": "Piattaforma:",
+        "category_title": "Categoria:"
     },
     "Results": {
         "query": "Risultati della ricerca per: {{ query }}",

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

@@ -0,0 +1,11 @@
+@import 'fontsize';
+@import 'spacing';
+
+
+.container {
+
+    .title {
+        margin-bottom: $spacing_16;
+    }   
+
+}

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

@@ -0,0 +1,42 @@
+'use client'
+
+import { XVideosCategories } from '@/meta/settings';
+
+import css from './Category.module.scss'
+
+import React from 'react';
+
+import { setCookie } from '@/utils/cookies/write';
+import { useCookies } from 'react-cookie';
+
+interface Props {
+    labels: {
+        title: string,
+    }
+}
+
+const Category: React.FC<Props> = (props) => {
+
+    const { labels } = props
+    
+    const [cookies] = useCookies(['category']);
+
+    const handleChange = async (event: React.ChangeEvent<HTMLSelectElement>) => {
+        const value = event.target.value;
+
+        await setCookie('category', value)
+    }
+
+    return (
+        <div className={css.container}>
+            <div className={css.title}>{labels.title}</div>
+            <select defaultValue={ cookies.category ?? XVideosCategories.etero } onChange={handleChange} name={'category'} aria-label={labels.title}>
+                {Object.keys(XVideosCategories).map((elem, key) => {
+                    return <option className={css.option} key={key} value={elem}>{elem.toUpperCase()}</option>
+                })}
+            </select>
+        </div>
+    );
+};
+
+export default Category;

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

@@ -16,7 +16,7 @@
 
     .content {
         display: flex;
-        flex-direction: row;
+        flex-direction: column;
     }
 }
 

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

@@ -6,12 +6,14 @@ import { IoCloseCircleOutline } from "react-icons/io5";
 
 import style from './Modal.module.scss'
 import Platform from './Platform';
+import Category from './Category';
 
 interface Props {
   handleClose(): void
   labels: {
     title: string
     platform: any
+    category: any
   }
 }
 
@@ -28,6 +30,7 @@ const LangSwitcher: React.FC<Props> = (props) => {
         </header>
         <div className={style.content}>
           <Platform labels={{ title: labels.platform.title }} />
+          <Category labels={{ title: labels.category.title }} />
         </div>
       </article>
     </dialog >

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

@@ -28,6 +28,9 @@ const Menu: React.FC = () => {
         title: t('settings_title'),
         platform: {
             title: t('platform_title')
+        },
+        category: {
+            title: t('category_title')
         }
     }
 

src/meta/settings.ts

@@ -3,6 +3,12 @@ export enum Platforms {
     xnxx= 'xnxx'
 }
 
+export enum XVideosCategories {
+    etero= 'etero',
+    gay= 'gay',
+    trans= 'trans'
+}
+
 export enum Themes {
     light= 'light',
     dark= 'dark',