diff --git a/pages/test.tsx b/pages/test.tsx index b92b6f60e..f9c3465ee 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -4,7 +4,7 @@ import { import MenuNavigation from 'src/components/common/MenuNavigation/MenuNavigation'; import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'; import BlogContent from 'src/components/modules/blogs/BlogContent/BlogContent'; -import { RecipeListPage } from 'src/components/modules/recipes'; +// import { RecipeListPage } from 'src/components/modules/recipes'; import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'; import BlogDetailPage from 'src/components/modules/blogs/BlogDetailPage/BlogDetailPage'; @@ -35,42 +35,49 @@ const CATEGORY = [ }, ] const BRAND = [ + { - name: 'All', - link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`, - }, - { - name: 'Veggie', + name: 'Maggi', link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, }, { - name: 'Seafood', + name: 'Cholimes', link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, }, { - name: 'Frozen', + name: 'Chinsu', 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 FEATURED = [ + + { + name: 'Best Sellers', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`, + }, + { + name: 'Sales', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`, + }, + { + name: 'New Item', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`, + }, + { + name: 'Viewed', + link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=viewed`, + } + ]; export default function Test() { return ( <> {/* */} - - - {/* - */} + {/* */} + {/**/} + ) } diff --git a/public/bg-products.svg b/public/bg-products.svg index 2118c3277..1eaa1df8b 100644 --- a/public/bg-products.svg +++ b/public/bg-products.svg @@ -1,7 +1,7 @@ - - - - + + + + diff --git a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss index 06a40f49c..aa3f5e6c3 100644 --- a/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss +++ b/src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss @@ -1,6 +1,8 @@ @import "../../../styles/utilities"; .menuNavigationProductListDesktop{ - @apply hidden; + @screen sm-only { + @apply hidden; + } } .menuNavigationProductListMobile{ @apply hidden; diff --git a/src/components/common/PaginationCommon/PaginationCommon.tsx b/src/components/common/PaginationCommon/PaginationCommon.tsx index d0df5efe7..aed2473f3 100644 --- a/src/components/common/PaginationCommon/PaginationCommon.tsx +++ b/src/components/common/PaginationCommon/PaginationCommon.tsx @@ -1,18 +1,19 @@ import classNames from 'classnames' import React, { useEffect, useState } from 'react' import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons' +import { DEFAULT_PAGE_SIZE } from 'src/utils/constanst.utils' import PaginationItem from './components/PaginationItem' import s from './PaginationCommon.module.scss' interface PaginationCommonProps { defaultCurrent?: number - pageSize: number + pageSize?: number total: number onChange?: (page: number, pageSize: number) => void } const PaginationCommon = ({ total, - pageSize, + pageSize=DEFAULT_PAGE_SIZE, defaultCurrent, onChange, }: PaginationCommonProps) => { @@ -54,14 +55,14 @@ const PaginationCommon = ({ ) })}
= pageNum - 1, + [s.disable]: currentPage >= pageNum - 1, })} onClick={onNextClick} > diff --git a/src/components/icons/IconArrowUp.tsx b/src/components/icons/IconArrowUp.tsx index 3eac6391b..1f518d612 100644 --- a/src/components/icons/IconArrowUp.tsx +++ b/src/components/icons/IconArrowUp.tsx @@ -2,7 +2,7 @@ const ArrowUp = () => { return ( - + ) } diff --git a/src/components/icons/IconHide.tsx b/src/components/icons/IconHide.tsx index 9b84671c6..a977aff84 100644 --- a/src/components/icons/IconHide.tsx +++ b/src/components/icons/IconHide.tsx @@ -3,8 +3,8 @@ import React from 'react' const IconHide = () => { return ( - - + + ) } diff --git a/src/components/modules/home/HomeVideo/assets/bg_left.svg b/src/components/modules/home/HomeVideo/assets/bg_left.svg index d730f777d..74b215ae0 100644 --- a/src/components/modules/home/HomeVideo/assets/bg_left.svg +++ b/src/components/modules/home/HomeVideo/assets/bg_left.svg @@ -1,19 +1,19 @@ - - + + - - + + - - + + diff --git a/src/components/modules/home/HomeVideo/assets/bg_right.svg b/src/components/modules/home/HomeVideo/assets/bg_right.svg index e89652a3a..346d14e31 100644 --- a/src/components/modules/home/HomeVideo/assets/bg_right.svg +++ b/src/components/modules/home/HomeVideo/assets/bg_right.svg @@ -1,21 +1,21 @@ - - + + - - + + - - + + diff --git a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss index 59d1c60ef..2f70eb3ca 100644 --- a/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss +++ b/src/components/modules/recipes-list/RecipesList/RecipesItem/RecipesItem.module.scss @@ -31,19 +31,15 @@ .recipesItemText { width: 65%; .recipesItemName{ - @apply topline; + @apply topline font-bold cursor-pointer; display: -webkit-box; -webkit-line-clamp: 1; overflow: hidden; -webkit-box-orient: vertical; - font-feature-settings: "salt" on; - cursor: pointer; - font-weight:bold; color:var(--text-active); margin-top: 1.6rem; - &:hover { color: var(--primary); } diff --git a/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss index 1e33eecd2..5f9ded191 100644 --- a/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss +++ b/src/components/modules/recipes-list/RecipesList/RecipesList.module.scss @@ -43,11 +43,11 @@ .item { @screen md { width: calc(97% / 2); - margin-top:4rem; + margin-top:1rem; } @screen lg{ width: calc(97% / 3); - margin-top:4rem; + margin-top:1rem; } } } @@ -60,7 +60,7 @@ margin:2rem 0; } } - .select{ + .boxSelect{ @apply flex justify-between w-full; padding: 2.5rem 0; @@ -69,13 +69,21 @@ width: auto; padding:0; } - .categorySelect{ - + .categorySelectCate{ @screen xl { @apply hidden; } } - + label{ + @apply font-bold topline ; + color:var(--text-active); + @screen xl { + @apply hidden; + } + } + .select{ + margin-top: 1rem; + } } } diff --git a/src/components/modules/recipes-list/RecipesList/RecipesList.tsx b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx index 5ade75eec..0788e1a47 100644 --- a/src/components/modules/recipes-list/RecipesList/RecipesList.tsx +++ b/src/components/modules/recipes-list/RecipesList/RecipesList.tsx @@ -38,10 +38,6 @@ const recipe:RecipeCardProps[] = [{ imageSrc: image14.src }]; const BREADCRUMB = [ - { - name: 'Home', - link: "/", - }, { name: 'Special Recipes', link: `#`, @@ -177,15 +173,21 @@ const RecipesList = ({ data =recipe}:Props) => {
SPECIAL RECIPES -
-
- +
+
+ +
+ +
+
+
+ +
+ +
- -
-
{data?.map((item,index) => ( diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 0e901ff04..1522e477f 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -49,4 +49,5 @@ export const KEY = { ENTER: 'Enter', } -export const OPTION_ALL = 'all'; \ No newline at end of file +export const OPTION_ALL = 'all'; +export const DEFAULT_PAGE_SIZE=20 \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 3792a030c..69ab1ade5 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -113,9 +113,11 @@ module.exports = { 'sm-only': {'min': '0', 'max': '767px'}, 'sm': '640px', // => @media (min-width: 640px) { ... } + 'md-only': {'min': '768px', 'max': '1023px'}, 'md': '768px', // => @media (min-width: 768px) { ... } + 'lg-only': {'min': '1024px', 'max': '1279px'}, 'lg': '1024px', // => @media (min-width: 1024px) { ... }