From 077020f450ceb6a4f5ac6eae514beec2403cc35f Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 27 Aug 2021 15:08:32 +0700 Subject: [PATCH] :bug: bug: fix bug before merge to common :%s --- pages/index.tsx | 40 ++--------------- .../ButtonCommon/ButtonCommon.module.scss | 2 +- ...module.scss => CarouselCommon.module.scss} | 10 ++--- .../common/CarouselCommon/CarouselCommon.tsx | 6 +-- .../CustomCarouselArrow.module.scss | 17 ------- .../CustomArrow/CustomCarouselArrow.tsx | 2 - .../ModalCommon/ModalCommon.module.scss | 1 - .../ProductCard/ProductCard.module.scss | 9 +++- .../common/ProductCard/ProductCard.tsx | 21 +++++---- .../ProductCaroucel.module.scss | 15 ------- .../ProductCarousel.module.scss | 16 +++++++ .../ProductCarousel.tsx} | 12 ++--- .../common/RecipeCard/RecipeCard.module.scss | 7 ++- .../common/RecipeCard/RecipeCard.tsx | 13 ++++-- .../RecipeCaroucel/RecipeCaroucel.module.scss | 14 ------ .../RecipeCarousel/RecipeCarousel.module.scss | 16 +++++++ .../RecipeCarousel.tsx} | 8 ++-- src/components/common/index.ts | 2 +- .../CollectionCarcoucel.tsx | 13 +++--- .../home/HomeCollection/HomeCollection.tsx | 9 +++- .../home/HomeRecipe/HomeRecipe.module.scss | 6 +-- .../modules/home/HomeRecipe/HomeRecipe.tsx | 45 ++++++++++++++++--- src/components/modules/home/index.ts | 1 + src/styles/_base.scss | 3 -- src/styles/_utilities.scss | 4 ++ 25 files changed, 149 insertions(+), 143 deletions(-) rename src/components/common/CarouselCommon/{CaroucelCommon.module.scss => CarouselCommon.module.scss} (89%) delete mode 100644 src/components/common/ProductCaroucel/ProductCaroucel.module.scss create mode 100644 src/components/common/ProductCarousel/ProductCarousel.module.scss rename src/components/common/{ProductCaroucel/ProductCaroucel.tsx => ProductCarousel/ProductCarousel.tsx} (78%) delete mode 100644 src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss create mode 100644 src/components/common/RecipeCarousel/RecipeCarousel.module.scss rename src/components/common/{RecipeCaroucel/RecipeCaroucel.tsx => RecipeCarousel/RecipeCarousel.tsx} (84%) diff --git a/pages/index.tsx b/pages/index.tsx index bbf712910..24c234f5c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,42 +1,8 @@ -import { FeaturedProductCard, Layout, ProductCaroucel, RecipeCard } from 'src/components/common' +import { Layout } from 'src/components/common' import { HomeBanner, HomeCollection, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; +import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe'; -// import image9 from "../public/assets/images/image9.png" -// import image10 from "../public/assets/images/image10.png" -// import image11 from "../public/assets/images/image11.png" -import image12 from "../public/assets/images/image12.png" -// import { CollectionCarcoucel } from 'src/components/modules/home' -import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe' -import image13 from "../public/assets/images/image13.png" -import image14 from "../public/assets/images/image14.png" -import { RecipeCardProps } from '../src/components/common/RecipeCard/RecipeCard'; - -const recipe:RecipeCardProps[] = [{ - title: "Special Recipe of Vietnamese Phở", - description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", - imageSrc: image12.src -},{ - title: "Original Recipe of Curry", - description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", - imageSrc: image13.src -},{ - title: "The Best Recipe of Beef Noodle Soup", - description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", - imageSrc: image14.src -},{ - title: "Special Recipe of Vietnamese Phở", - description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", - imageSrc: image12.src -},{ - title: "Original Recipe of Curry", - description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", - imageSrc: image13.src -},{ - title: "The Best Recipe of Beef Noodle Soup", - description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", - imageSrc: image14.src -}] export default function Home() { @@ -46,7 +12,7 @@ export default function Home() { - + ) diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index 70ab8f400..8bc4b23ca 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -5,7 +5,7 @@ display: flex; justify-content: center; align-items: center; - padding: 1.2rem 3.2rem; + padding: 0.8rem 3.2rem; &:disabled { filter: brightness(0.9); cursor: not-allowed; diff --git a/src/components/common/CarouselCommon/CaroucelCommon.module.scss b/src/components/common/CarouselCommon/CarouselCommon.module.scss similarity index 89% rename from src/components/common/CarouselCommon/CaroucelCommon.module.scss rename to src/components/common/CarouselCommon/CarouselCommon.module.scss index 373d03f31..802c25bb0 100644 --- a/src/components/common/CarouselCommon/CaroucelCommon.module.scss +++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss @@ -25,18 +25,18 @@ :global { .dots { display: flex; - padding: 10px 0; + padding: 1rem 0; justify-content: center; } .dot { border: none; - width: 10px; - height: 10px; + width: 1rem; + height: 1rem; background: #c5c5c5; border-radius: 50%; - margin: 0 5px; - padding: 5px; + margin: 0 0.5rem; + padding: 0.5rem; cursor: pointer; } diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx index 570fac52a..a9011a074 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.tsx +++ b/src/components/common/CarouselCommon/CarouselCommon.tsx @@ -2,7 +2,7 @@ import { useKeenSlider } from 'keen-slider/react' import React, { useEffect } from 'react' import 'keen-slider/keen-slider.min.css' import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow' -import s from './CaroucelCommon.module.scss' +import s from './CarouselCommon.module.scss' import { TOptionsEvents } from 'keen-slider' import classNames from 'classnames' import CustomDot from './CustomDot/CustomDot' @@ -47,7 +47,6 @@ const CarouselCommon = ({ useEffect(() => { if(isDot && slider){ - // console.log('f',Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))) let array:number[] array = [...Array(Math.ceil(data.length/(Number(slider.details().slidesPerView)||1))).keys()].map((i)=>{ return (Number(slider.details().slidesPerView)||1)*i @@ -67,7 +66,6 @@ const CarouselCommon = ({ const onDotClick = (index:number) => { slider.moveToSlideRelative(Math.floor(index)) - // setDotActive(index) } return (
@@ -88,12 +86,10 @@ const CarouselCommon = ({ )} diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss index cf01ab543..fb174c66c 100644 --- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss +++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss @@ -1,20 +1,3 @@ -// .customArrow{ -// width: 64px; -// height: 64px; -// &:focus{ -// outline: none; -// } -// @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100; -// &.leftArrow{ -// @apply left-0; -// } -// &.rightArrow{ -// @apply right-0; -// } -// &.isDisabled{ -// @apply hidden ; -// } -// } .navigationWrapper{ :global(.customArrow) { width: 64px; diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx index b4f1ee86c..853188f4a 100644 --- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx +++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx @@ -3,7 +3,6 @@ import React from 'react' import ArrowLeft from 'src/components/icons/ArrowLeft' import ArrowRight from 'src/components/icons/ArrowRight' import "./CustomCarouselArrow.module.scss" -// import s from "../CaroucelCommon.module.scss" interface CustomCarouselArrowProps extends React.ButtonHTMLAttributes { @@ -18,7 +17,6 @@ export const CustomCarouselArrow = ({ return (
- +
) diff --git a/src/components/modules/home/index.ts b/src/components/modules/home/index.ts index 7875cd920..e06362b12 100644 --- a/src/components/modules/home/index.ts +++ b/src/components/modules/home/index.ts @@ -4,3 +4,4 @@ export { default as HomeCTA } from './HomeCTA/HomeCTA' export { default as HomeSubscribe } from './HomeSubscribe/HomeSubscribe' export { default as HomeVideo } from './HomeVideo/HomeVideo' export { default as HomeCollection } from './HomeCollection/HomeCollection' +export { default as HomeRecipe } from './HomeRecipe/HomeRecipe' diff --git a/src/styles/_base.scss b/src/styles/_base.scss index aebbef0c2..5d0cd8322 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -39,9 +39,6 @@ --font-size: 1.6rem; --line-height: 2.4rem; - // --font-size: 16px; - // --line-height: 24px; - --font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif; diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index d76d233db..93291dc3a 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -88,6 +88,10 @@ padding-left: 6.4rem; padding-right: 6.4rem; } + @screen lg { + padding-left: 11.2rem; + padding-right: 11.2rem; + } } .spacing-horizontal-left { padding-left: 2rem;