fix: fix css show hide for MenuNavigationProductList

pages/test.tsx

@@ -3,20 +3,68 @@ import {
   ButtonCommon,
   Layout, ModalInfo
 } from 'src/components/common'
+import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation';
+
+import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'
+import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+const CATEGORY = [
+  {
+      name: 'All',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+  },
+  {
+      name: 'Veggie',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+      name: 'Seafood',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+      name: 'Frozen',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+      name: 'Coffee Bean',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+  },
+  {
+      name: 'Sauce',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+  },
+]
+const BRAND = [
+  {
+      name: 'All',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
+  },
+  {
+      name: 'Veggie',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
+  },
+  {
+      name: 'Seafood',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
+  },
+  {
+      name: 'Frozen',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
+  },
+  {
+      name: 'Coffee Bean',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=coffee-bean`,
+  },
+  {
+      name: 'Sauce',
+      link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=sauce`,
+  },
+]
 export default function Test() {
-  const [visible, setVisible] = useState(false)
-  const onClose = () => {
-    setVisible(false)
-  }
-  const onOpen = () => {
-    setVisible(true)
-  }
+
   return (
     <>
-      <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalInfo visible={visible} onClose={onClose}>
-          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi?
-      </ModalInfo>
+      <MenuNavigation heading="CATEGORIES" categories={CATEGORY}/>
+      <MenuNavigationProductList categories={CATEGORY}  brands={BRAND} featured={BRAND}/>
     </>
   )
 }

src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss

@@ -0,0 +1,43 @@
+@import "../../../styles/utilities";
+.menuNavigationProductListDesktop{
+    @apply hidden;
+}
+.menuNavigationProductListMobile{
+    @apply hidden;
+    &.isShow{
+        @apply block;
+        @screen md {
+            @apply hidden;
+        }
+    }
+    .menuNavigationProductModal{
+        background: rgba(0, 0, 0, 0.5);
+        position: fixed;
+        left: 0;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        z-index: 10000;
+        .content{
+            @apply spacing-horizontal;
+            margin-top: 3rem;
+            padding-top: 2rem ;
+            padding-bottom: 5rem;
+            background-color: white;
+            overflow: auto;
+            height: 100%;
+            border-radius: 2.4rem 2.4rem 0 0;
+            .head{
+                @apply flex justify-between;
+                h3{
+                    @apply heading-3 font-bold;
+                    color:var(--text-base);
+                }
+            }
+            button{
+                margin-top: 2rem;
+                width: 100%;
+            }
+        }
+    }
+}

src/components/common/MenuNavigationProductList/MenuNavigationProductList.tsx

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import {ButtonCommon} from 'src/components/common';
+import s from './MenuNavigationProductList.module.scss';
+import MenuSort from './MenuSort/MenuSort';
+import {LANGUAGE} from 'src/utils/language.utils';
+import classNames from 'classnames'
+import MenuFilter from '../MenuFilter/MenuFilter';
+import MenuNavigation from '../MenuNavigation/MenuNavigation';
+import IconHide from 'src/components/icons/IconHide';
+
+interface Props{
+    categories:{name:string,link:string}[],
+    brands:{name:string,link:string}[],
+    featured:{name:string,link:string}[],
+}
+
+const MenuNavigationProductList = ({categories,brands,featured}:Props)=>{
+    
+    const [dataSort,setDataSort] = useState({});
+    const [isShow,setIsShow] = useState(true);
+    
+    function handleValue(value:Object){
+        setDataSort({...dataSort,...value});
+    }
+    function filter(){
+        console.log(dataSort)
+    }
+
+    function hideMenu(){
+        if(isShow === true){
+            setIsShow(false);
+        }
+    }
+    return(
+        <>
+            <div className={s.menuNavigationProductListDesktop}>
+                <MenuNavigation categories={categories} heading="Categories"/>
+                <MenuNavigation categories={brands} heading="Brands"/>
+                <MenuNavigation categories={featured} heading="Featured"/>
+            </div>
+            <div className={classNames({ [s.menuNavigationProductListMobile] :true,[s.isShow]: isShow})}>
+                <div className={s.menuNavigationProductModal}>
+                    <div className={s.content}>
+                        <div className={s.head}>
+                            <h3>FILTER</h3>
+                            <div onClick={hideMenu}><IconHide/></div>
+                        </div>
+                        <MenuFilter categories={categories} heading="Categories" type="category" onChangeValue={handleValue}/>
+                        <MenuFilter categories={brands} heading="Brand" type="brand" onChangeValue={handleValue}/>
+                        <MenuFilter categories={featured} heading="Featured" type="featured" onChangeValue={handleValue}/>
+                        <MenuSort heading="SORT BY" type="sort" onChangeValue={handleValue}/>
+                        <ButtonCommon size="large" onClick={filter}>{LANGUAGE.BUTTON_LABEL.CONFIRM}</ButtonCommon>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}
+
+export default MenuNavigationProductList

src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss

@@ -0,0 +1,46 @@
+@import "../../../../styles/utilities";
+.menuSortWrapper{
+  
+    @screen md {
+        @apply hidden;
+    }
+    .menuSortHeading{
+        @apply sub-headline font-bold ;
+        color: var(--text-active);
+        font-feature-settings: 'salt' on;
+        margin: 0.8rem 0;
+    }
+    .menuSortList{
+        box-sizing: border-box;
+        &::after{
+            @apply absolute;
+            top: 110%;
+            content: "";
+            width: 100%;
+            border-bottom: 1px solid var(--border-line);
+        } 
+        li{
+            div{
+             height: 4.8rem;
+             line-height: 4.8rem;
+             padding: 0 1.6rem;
+             margin-right: 0.8rem;
+             border-radius: 0.8rem;
+             &.active {
+                @apply font-bold relative;
+                color:var(--text-active);
+                background-color: var(--primary-lightest);
+                &::after{
+                    @apply absolute;
+                    content:"";
+                    background-image: url('/assets/svg/check.svg');
+                    right: 1.6rem;
+                    top: calc(50% - 24px/2);
+                    width: 2.4rem;
+                    height: 2.4rem;
+                }
+             }
+            }
+        }
+    }
+}

src/components/common/MenuNavigationProductList/MenuSort/MenuSort.tsx

@@ -0,0 +1,67 @@
+import classNames from 'classnames';
+import { useEffect, useState } from 'react';
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
+import s from './MenuSort.module.scss';
+
+interface Props {
+    children?: any,
+    heading:string,
+    type:string,
+    onChangeValue?: (value: Object) => void
+}
+const SORT = [
+    {
+        name: 'By Name',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=by-name`,
+    },
+    {
+        name: 'Price(High to Low)',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=high-to-low`,
+    },
+    {
+        name: 'Price (Low to High)',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=low-to-high`,
+    },
+    {
+        name: 'On Sale',
+        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.SORTBY}=on-sale`,
+    },
+  ];
+
+
+const MenuSort = ({heading,type,onChangeValue}:Props)=> {
+    const [active, setActive] = useState<string>('');
+
+    function handleClick(link:string){
+        setActive(link);
+
+        if(active === link){
+            setActive('');
+        }
+    }
+
+    useEffect(()=>{
+      
+        let href = active?.split("=");
+        const linkValue = href[1];
+
+        onChangeValue && onChangeValue({[type]:linkValue});
+    },[active]) 
+  
+    return (
+        <section className={classNames(s.menuSortWrapper)}>
+            <h2 className={classNames(s.menuSortHeading)}>{heading}</h2>
+            <ul className={s.menuSortList}>
+                {
+                    SORT.map(item => <li key={item.name}>
+                        <div onClick={()=> handleClick(item.link)} className={classNames({ [s.active]: item.link === active? true: false })}>
+                            {item.name}
+                        </div>
+                    </li>)
+                }
+            </ul>
+        </section>
+    )
+}
+
+export default MenuSort

src/components/modules/blogs/BlogContent/BlogContent.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { DateTime } from "src/components/common";
-
-interface Props{
-    image:StaticImageData,
-}
-
-const BlogContent = ({}:Props) => {
-    return (
-        <>
-            <DateTime date="APRIL 30, 2021"/>
-        </>
-    )
-}
-
-export default BlogContent

src/components/modules/blogs/BlogDetailImg/BlogDetailImg.tsx

@@ -1,18 +0,0 @@
-import Image from "next/image";
-import React from 'react';
-
-interface Props{
-    image:StaticImageData,
-}
-
-
-
-const BlogDetailImg = ({image}:Props) => {
-    return (
-        <>
-             <Image src={image} />
-        </>
-    )
-}
-
-export default BlogDetailImg

src/components/modules/blogs/index.ts

@@ -1 +0,0 @@
-export { default as BlogDetailImg } from './BlogDetailImg/BlogDetailImg'

src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.module.scss

@@ -1,64 +0,0 @@
-@import "../../../../../styles/_utilities";
-
-.recipesItem {
-    @apply flex justify-between;
-    margin: 1.5rem 0;
-
-    @screen md{
-        @apply block;
-    }
-
-    .recipesItemImage {
-        @apply transition-all duration-200;
-        width: 31%;
-        img {
-            @apply block object-cover;
-            width: 100%;
-            min-height: 12.5rem;
-            border-radius: 1.5rem;
-        }
-
-        @screen md {
-            @apply object-cover cursor-pointer;
-            width: 100%;
-            margin: 0 auto;
-            img{
-                height:100%;
-                border-radius: 2.4rem;
-            }
-        }
-    }
-    .recipesItemText {
-        width: 65%;
-        .recipesItemName{
-            @apply topline;
-
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-             overflow: hidden;
-            -webkit-box-orient: vertical;
-
-            font-feature-settings: "salt" on;
-            cursor: pointer;
-            font-weight:bold;
-            color:var(--text-active);
-            margin-bottom: 1rem;
-
-            &:hover {
-                color: var(--primary);
-            }
-        }
-        @screen md {
-            width: 100%;
-        }
-    }
-
-    .recipesItemDescription{
-        color:var(--text-label);
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-         overflow: hidden;
-        -webkit-box-orient: vertical;
-    }
- 
-}

src/components/modules/recipes/RecipesList/RecipesItem/RecipesItem.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import s from './RecipesItem.module.scss'
-import classNames from 'classnames';
-import Image from "next/image";
-import Link from 'next/link';
-
-interface RecipesItem {
-    image:StaticImageData,
-    name: string,
-    description:string,
-    link: string
-}
-
-const RecipesItem = ({ image, name,description, link }: RecipesItem) => {
-    return (
-        <div className={classNames(s.recipesItem)}>
-            <div className={classNames(s.recipesItemImage)}>
-                <Link href={link}>
-                    <a>
-                        <Image src={image} />
-                    </a>
-                </Link>
-            </div>
-            <Link href={link}>
-                <a className={classNames(s.recipesItemText)}>
-                    <div className={classNames(s.recipesItemName)}>{name}</div>
-                    <div className={classNames(s.recipesItemDescription)}>{description}</div>
-                </a>
-            </Link>
-        </div >
-    )
-}
-
-export default RecipesItem

src/components/modules/recipes/RecipesList/RecipesList.module.scss

@@ -1,43 +0,0 @@
-@import "../../../../styles/_utilities";
-
-.recipesListWrapper {
-    @screen md{
-        padding-bottom:5.6rem;
-    }
-    .recipesHead{
-        @apply flex justify-end;
-        @screen md{
-            @apply  justify-between;
-        }
-    }
-    .recipesListBlogs{
-        @screen md {
-            @apply flex flex-col items-center justify-center;
-        }
-        .recipesList {
-            @screen md {
-                @apply flex justify-between flex-wrap;
-                margin: 1rem 0;
-            }
-            .recipesItem {
-                @screen md {
-                    width: calc(97% / 2);
-                    margin-top:4rem;
-                }
-                @screen lg{
-                    width: calc(97% / 3);
-                    margin-top:4rem;
-                }
-            }
-        }
-    }
-    .recipesPagination{
-        @apply flex justify-center;
-        margin: 3rem 0;
-        @screen md {
-            @apply flex justify-center;
-            margin:2rem 0;
-        }
-    }
-   
-}

src/components/modules/recipes/RecipesList/RecipesList.tsx

@@ -1,51 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-import s from './RecipesList.module.scss';
-import RecipesItem from './RecipesItem/RecipesItem';
-
-import { PaginationCommon } from 'src/components/common';
-
-interface Props{
-    recipes:{
-        id:string,
-        title:string,
-        image:StaticImageData,
-        description:string,
-        link:string
-    }[],
-}
-
-
-
-const RecipesList = ({recipes}:Props) => {
-    return (
-        <>
-        <div className={classNames(s.recipesListWrapper)}>
-            <div  className={classNames(s.recipesHead)}>
-                
-            </div>
-
-            <div className={classNames(s.recipesListBlogs)}>
-                <div className={classNames(s.recipesList)}>
-                    {recipes?.map(item => (
-                        <div key={item.id} className={classNames(s.recipesItem)}>
-                          <RecipesItem
-                                name={item.title}
-                                image={item.image}
-                                description={item.description}
-                                link={item.link}
-                            />
-                        </div>
-                    ))}
-                </div>
-            </div>
-            <div  className={classNames(s.recipesPagination)}>
-                <PaginationCommon pageSize={6} total={9}/>
-            </div>
-        </div>
-        </>
-    )
-}
-
-export default RecipesList

src/components/modules/recipes/RecipesListPage/RecipesListPage.module.scss

@@ -1,79 +0,0 @@
-@import "../../../../styles/_utilities";
-.recipesListPageWrapper{
-    @apply spacing-horizontal;
-
-    @screen md {
-        padding:0 3.2rem;
-    }
-
-    .recipesListPageBreadcrumbDesktop{
-        @apply hidden;
-        @screen md {
-            @apply block;
-        }
-    }
-    .recipesListPageHeadMobile{
-        margin-top: 2rem;
-        h2{
-            margin-bottom: 0.7rem;
-        }
-        @screen md {
-            @apply hidden;
-            padding: 3rem 0;
-        }
-    }
-    .recipesListPageMain{
-        @screen md {
-            @apply flex;
-        }
-        .categoriesDesktop{
-            @apply hidden;
-            @screen md {
-                @apply block;
-                width:25%;
-            }
-        }
-        .sortByMobile{
-            @apply flex justify-end;
-        }
-        .categoriesMobile{
-            ul{
-                @apply flex-nowrap ;
-                overflow: auto;
-            }
-        }
-        .recipesList{
-            @screen md {
-                width:75%;
-            }
-            .sortByDesktop{
-                @apply hidden;
-                @screen md {
-                    @apply flex justify-between;
-                    margin-top:1.5rem;
-                    h2{
-                        @apply heading-3;
-                    }
-                }
-                @screen xl{
-                    @apply flex justify-between;
-                     h2{
-                        @apply heading-2;
-                    }
-                }
-            }
-            .selectMobile{
-                @apply flex justify-between;
-                margin: 2rem 0;
-                label{
-                    @apply topline;
-                    font-weight: bold;
-                }
-                @screen md {
-                    @apply hidden;
-                }
-            }
-        }
-    }
-   
-}

src/components/modules/recipes/RecipesListPage/RecipesListPage.tsx

@@ -1,175 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import s from './RecipesListPage.module.scss';
-import RecipesList from '../RecipesList/RecipesList';
-import { Banner, MenuFilter } from 'src/components/common';
-import {MenuNavigation} from 'src/components/common';
-import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
-import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon';
-import HeadingCommon from "../../../common/HeadingCommon/HeadingCommon";
-import { SelectCommon } from 'src/components/common';
-import {RECIPE_DATA_TEST} from '../../../../utils/demo-data';
-
-import blog1 from './img/blog1.png';
-import blog2 from './img/blog2.png';
-import blog3 from './img/blog3.png';
-import blog4 from './img/blog4.png';
-import blog5 from './img/blog5.png';
-import blog6 from './img/blog6.png';
-
-const BREADCRUMB = [
-    {
-        name: 'Home',
-        link: "/",
-    },
-    {
-        name: 'Special Recipes',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
-    },
-];
-
-const CATEGORY = [
-      {
-          name: 'All',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=${OPTION_ALL}`,
-      },
-      {
-          name: 'Malaysian',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=malaysia`,
-      },
-      {
-          name: 'Vietnamese',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=vietnamese`,
-      },
-      {
-          name: 'Thailand',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=thailand`,
-      },
-      {
-          name: 'Indian',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=indian`,
-      },
-      {
-          name: 'Lao',
-          link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=lao`,
-      },
-      {
-        name: 'Chinese',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=chinese`,
-      },
-      {
-        name: 'Korean',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=korean`,
-      },
-      {
-        name: 'Japanese',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=japanese`,
-      }, 
-      {
-        name: 'Western',
-        link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.RECIPES}=western`,
-      },
-    ];
-
-const RECIPES = [
-    {
-        id: '1',
-        image: blog1,
-        title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
-        description: 'The DEBM diet stands for "Delicious Happy Fun Diet". This diet was popularized by Robert...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=veggie`
-    }, {
-        id: '2',
-        image: blog2,
-        title: "9 Ways to Make an Aloe Vera Mask at Home",
-        description: 'Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=seafood`
-    }
-    , {
-        id: '3',
-        image: blog3,
-        title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
-        description: 'Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=coffee-bean`
-    }
-    , {
-        id: '4',
-        image: blog4,
-        title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
-        description: 'The DEBM diet stands for "Delicious Happy Fun Diet". This diet was popularized by Robert...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
-    }, {
-        id: '5',
-        image: blog5,
-        title: "9 Ways to Make an Aloe Vera Mask at Home",
-        description: 'Aloe vera or  aloe vera  is a green plant, has thorns on the side of the skin with yellowish patches and...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
-    }
-    , {
-        id: '6',
-        image: blog6,
-        title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
-        description: 'Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...',
-        link: `${ROUTE.PRODUCTS}?${QUERY_KEY.RECIPES}=sauce`,
-    }
-];
-
-const OPTIONSLECT=[
-    {
-        name:"SORT BY 1"
-    },
-    {
-        name:"SORT BY 2"
-    },
-    {
-        name:"SORT BY 3"
-    },
-]
-
-const RecipesListPage = () => {
-    return (
-       <div className={classNames(s.recipesListPageWrapper)}>
-           
-            <Banner title={'SPECIAL RECIPE OF THE WEEK'} subtitle={'Last call! Shop deep deals on 100+ bulk picks while you can.'} imgLink={'assets/bannerrecipes.png'} size="large"/>
-            
-            <div className={classNames(s.recipesListPageBreadcrumbDesktop)}>
-                <BreadcrumbCommon crumbs={BREADCRUMB} />
-            </div>
-
-            <div className={classNames(s.recipesListPageHeadMobile)}>
-                <div className={classNames(s.heading)}>
-                    <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
-                    <BreadcrumbCommon crumbs={BREADCRUMB} />
-                </div>
-            </div>
-
-            <div className={classNames(s.recipesListPageMain)}>
-
-                <div className={classNames(s.categoriesDesktop)}>
-                    <MenuNavigation categories={CATEGORY} heading="Categories"/>
-                </div>
-
-                <div className={classNames(s.recipesList)}>
-                    <div className={classNames(s.sortByDesktop)}>
-                        <HeadingCommon align='left'>SPECIAL RECIPES</HeadingCommon>
-                        <SelectCommon option={OPTIONSLECT} placeHolder="SORT BY"/>
-                    </div>
-                    <div className={classNames(s.selectMobile)}>
-                        <div>
-                            <label htmlFor="">Categories</label>
-                            <SelectCommon option={CATEGORY} placeHolder="Categories"/>
-                        </div>
-                        <div>
-                            <label htmlFor="">Sort By</label>
-                            <SelectCommon option={OPTIONSLECT} placeHolder="Sort by"/>
-                        </div>
-                    </div>
-                    <RecipesList recipes={RECIPES}/>
-                </div>
-
-            </div>
-       </div>
-    )
-}
-
-export default RecipesListPage

src/components/modules/recipes/index.ts

@@ -1 +0,0 @@
-export { default as RecipesListPage } from './RecipesListPage/RecipesListPage'