crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 20:26:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #60 from KieIO/fixbug-13/9/2021-datnguyen

Browse Source 
Refactor Carousel Common
This commit is contained in:
lytrankieio123
2021-09-21 14:13:00 +07:00
committed by GitHub
parent fceb3c3ece 3b2eaef7a6
commit 114ee1b86d
39 changed files with 1795 additions and 1544 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
next-env.d.ts vendored
View File

@@ -1,3 +1,6 @@
/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />
// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.

2
package.json
View File

@@ -31,7 +31,6 @@
"eslint-config-next": "^11.1.2",
"immutability-helper": "^3.1.1",
"js-cookie": "^2.2.1",
"keen-slider": "^5.5.1",
"lodash.debounce": "^4.0.8",
"lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1",
@@ -44,6 +43,7 @@
"react-dom": "^17.0.2",
"react-fast-marquee": "^1.1.4",
"react-merge-refs": "^1.1.0",
"react-multi-carousel": "^2.6.5",
"react-player": "^2.9.0",
"react-use-measure": "^2.0.4",
"sass": "^1.38.0",

1
pages/_app.tsx
View File

@@ -2,7 +2,6 @@ import { ThemeProvider } from 'next-themes';
import type { AppProps } from 'next/app';
import React, { FC, useEffect } from 'react';
import { CustomShapeSvg, Head } from 'src/components/common';
import 'keen-slider/keen-slider.min.css';
import '../src/styles/main.scss';

3
pages/index.tsx
View File

@@ -1,5 +1,5 @@
import { Layout } from 'src/components/common';
import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
import { FeaturedProductsCarousel, HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
import HomeSpice from 'src/components/modules/home/HomeSpice/HomeSpice';
export default function Home() {
@@ -10,6 +10,7 @@ export default function Home() {
<HomeCategories />
<HomeCollection />
<HomeVideo />
<FeaturedProductsCarousel/>
<HomeSpice/>
<HomeCTA />
<HomeRecipe />

5
pages/test.tsx
View File

@@ -2,6 +2,7 @@ import {
FeaturedProductCard,
Layout
} from 'src/components/common';
import { HomeBanner } from 'src/components/modules/home';
// import { RecipeListPage } from 'src/components/modules/recipes';
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils';
import { PRODUCT_DATA_TEST, PRODUCT_DATA_TEST_PAGE } from 'src/utils/demo-data';
@@ -44,8 +45,7 @@ const BRAND = [
{
name: 'Chinsu',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
}
];
}]
const FEATURED = [
@@ -79,6 +79,7 @@ export default function Test() {
subTitle="50 first orders within a day"
price={data.price}
originPrice="$20.00" />
<HomeBanner/>
</>
)
}

3
src/components/common/Banner/Banner.module.scss
View File

@@ -0,0 +1,3 @@
.bannerWrap {
@apply w-full;
}

31
src/components/common/Banner/Banner.tsx
View File

@@ -1,16 +1,21 @@
import { TOptionsEvents } from 'keen-slider'
import React, { memo } from 'react'
import { ResponsiveType } from 'react-multi-carousel'
import CarouselCommon from '../CarouselCommon/CarouselCommon'
import BannerItem, { BannerItemProps } from './BannerItem/BannerItem'
import s from './Banner.module.scss'
interface Props {
data: BannerItemProps[],
}
const option: TOptionsEvents = {
slidesPerView: 1,
mode: 'free',
}
const RESPONSIVE:ResponsiveType = {
desktop: {
breakpoint: { max: 9999, min: 0 },
items: 1,
slidesToSlide:1
},
};
const Banner = memo(({ data }: Props) => {
if (data.length === 1) {
const item = data[0]
@@ -24,13 +29,15 @@ const Banner = memo(({ data }: Props) => {
/>
}
return (
<CarouselCommon<BannerItemProps>
data={data}
itemKey="banner"
Component={BannerItem}
option={option}
isDot={true}
/>
<div className={s.bannerWrap}>
<CarouselCommon<BannerItemProps>
data={data}
itemKey="banner"
Component={BannerItem}
responsive={RESPONSIVE}
showDots={true}
/>
</div>
)
})

5
src/components/common/Banner/BannerItem/BannerItem.module.scss
View File

@@ -1,8 +1,11 @@
@import "../../../../styles/utilities";
.bannerItem {
@apply bg-primary-light shape-common-lg overflow-hidden;
@apply bg-primary-light shape-common-lg overflow-hidden w-full;
padding: 0;
@screen lg {
max-height: 42rem;
}
&.large {
margin-bottom: 2.8rem;
background-image: url("./pattern.svg");

90
src/components/common/CarouselCommon/CarouselCommon.module.scss
View File

@@ -1,59 +1,75 @@
@import '../../../styles/utilities';
.navigationWrapper {
@apply relative;
overflow: hidden;
min-height: theme('caroucel.arrow-height');
.isPadding {
@apply spacing-horizontal;
// @apply spacing-horizontal;
}
.showDots {
padding-bottom: 2.4rem;
}
:global {
.react-multi-carousel-dot-list {
li {
button{
outline: none;
&:focus {
outline: none;
}
}
}
}
}
:global(.customArrow) {
width: 64px;
height: 64px;
border-radius: .8rem;
backdrop-filter: saturate(180%) blur(10px);
border-radius: 0.8rem;
backdrop-filter: saturate(180%) blur(10px);
&:focus {
outline: none;
}
@apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
&:global(.leftArrow) {
@apply hidden left-0;
@screen md {
@apply flex
}
@apply hidden left-0;
@screen md {
@apply flex;
}
}
&:global(.rightArrow) {
@apply hidden right-0;
@screen md {
@apply flex;
}
@apply hidden right-0;
@screen md {
@apply flex;
}
}
&:global(.isDisabledArrow) {
@apply hidden;
}
}
:global {
.dots {
display: flex;
padding: 1rem 0;
justify-content: center;
}
.dot {
border: none;
width: 1rem;
height: 1rem;
background: #c5c5c5;
border-radius: 50%;
margin: 0 0.5rem;
padding: 0.5rem;
cursor: pointer;
}
.dot:focus {
outline: none;
}
.dot.active {
background: #000;
}
}
:global {
.dots {
display: flex;
padding: 1rem 0;
justify-content: center;
}
.dot {
border: none;
width: 1rem;
height: 1rem;
background: #c5c5c5;
border-radius: 50%;
margin: 0 0.5rem;
padding: 0.5rem;
cursor: pointer;
}
.dot:focus {
outline: none;
}
.dot.active {
background: #000;
}
}
}

129
src/components/common/CarouselCommon/CarouselCommon.tsx
View File

@@ -1,85 +1,87 @@
import { useKeenSlider } from 'keen-slider/react'
import React, { useEffect } from 'react'
import 'keen-slider/keen-slider.min.css'
import React, { useEffect, useRef } from 'react'
import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
import s from './CarouselCommon.module.scss'
import { TOptionsEvents } from 'keen-slider'
import classNames from 'classnames'
import CustomDot from './CustomDot/CustomDot'
export interface CarouselCommonProps<T> {
import Carousel from 'react-multi-carousel'
import 'react-multi-carousel/lib/styles.css'
import {
ResponsiveType,
CarouselProps,
ButtonGroupProps,
} from 'react-multi-carousel/lib/types'
export interface CarouselCommonProps<T>
extends Omit<CarouselProps, 'children' | 'responsive'> {
data: T[]
Component: React.ComponentType<T>
isArrow?: Boolean
isDot?: Boolean
itemKey: String
option: TOptionsEvents
keenClassname?: string
isPadding?: boolean
defaultComponentProps?: object
responsive?: ResponsiveType
}
const RESPONSIVE = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
slidesToSlide: 3, // optional, default to 1.
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
slidesToSlide: 2, // optional, default to 1.
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
slidesToSlide: 1, // optional, default to 1.
},
}
const CarouselCommon = <T,>({
data,
data = [],
Component,
itemKey,
keenClassname,
isPadding = false,
isArrow = true,
isDot = false,
defaultComponentProps,
option: { slideChanged,slidesPerView, ...sliderOption },
responsive = RESPONSIVE,
showDots,
isPadding,
arrows,
...props
}: CarouselCommonProps<T>) => {
const [currentSlide, setCurrentSlide] = React.useState(0)
const [dotArr, setDotArr] = React.useState<number[]>([])
const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
...sliderOption,
slidesPerView,
slideChanged(s) {
setCurrentSlide(s.details().relativeSlide)
},
})
useEffect(() => {
if(isDot && slider && data){
let array:number[]
let number = data.length - Math.floor(slider.details().slidesPerView - 1)
if(number<1){
number = 1
}
array = [...Array(number).keys()]
setDotArr(array)
}
}, [isDot,slider,data])
const carousel = useRef<Carousel>(null)
const handleRightArrowClick = () => {
slider.next()
carousel.current?.next(carousel.current.props.slidesToSlide||1)
}
const handleLeftArrowClick = () => {
slider.prev()
}
const onDotClick = (index:number) => {
slider.moveToSlideRelative(index)
carousel.current?.previous(carousel.current.props.slidesToSlide||1)
}
return (
<div className={s.navigationWrapper}>
<div
ref={sliderRef}
className={classNames('keen-slider', keenClassname, {
<Carousel
{...props}
ref={carousel}
showDots={showDots}
customButtonGroup={<CarouselButtonGroup />}
renderButtonGroupOutside
sliderClass={''}
containerClass={classNames({
[s.showDots]: showDots,
[s.isPadding]: isPadding,
})}
responsive={responsive}
arrows={false}
renderDotsOutside={true}
ssr={true}
// customLeftArrow={<CustomCarouselArrow side="left" />}
// customRightArrow={<CustomCarouselArrow side="right" />}
>
{data?.map((props, index) => {
const allProps = defaultComponentProps ? { ...props, ...defaultComponentProps } : props
return (
<div className="keen-slider__slide" key={`${itemKey}-${index}`}>
<Component {...allProps} />
</div>
)
{data.map((props, index) => {
const allProps = defaultComponentProps
? { ...props, ...defaultComponentProps }
: props
return <Component {...allProps} key={`${itemKey}-${index}`} />
})}
</div>
{slider && isArrow && (
</Carousel>
{carousel && arrows && (
<>
<CustomCarouselArrow
side="right"
@@ -91,7 +93,7 @@ const CarouselCommon = <T,>({
/>
</>
)}
{slider && isDot && (
{/* {slider && isDot && (
<div className="dots">
{dotArr.map((index) => {
return (
@@ -99,9 +101,16 @@ const CarouselCommon = <T,>({
)
})}
</div>
)}
)} */}
</div>
)
}
const CarouselButtonGroup = ({ next, previous }: ButtonGroupProps) => {
return (
<>
<CustomCarouselArrow side="left" onClick={previous} />
<CustomCarouselArrow side="right" onClick={next} />
</>
)
}
export default CarouselCommon

28
src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
View File

@@ -2,24 +2,30 @@ import classNames from 'classnames'
import React from 'react'
import ArrowLeft from 'src/components/icons/ArrowLeft'
import ArrowRight from 'src/components/icons/ArrowRight'
import "./CustomCarouselArrow.module.scss"
interface CustomCarouselArrowProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
import './CustomCarouselArrow.module.scss'
import { ArrowProps } from 'react-multi-carousel/lib/types'
interface CustomCarouselArrowProps extends ArrowProps {
side: 'left' | 'right'
isDisabled?:Boolean
isDisabled?: Boolean
}
export const CustomCarouselArrow = ({
side,isDisabled,
...props
side,
isDisabled,
onClick,
}: CustomCarouselArrowProps) => {
const handleClick = () => {
onClick && onClick()
}
return (
<button
{...props}
className={classNames("customArrow", { [`${side}Arrow`]: side,"isDisabledArrow":isDisabled})}
onClick={handleClick}
className={classNames('customArrow', {
[`${side}Arrow`]: side,
isDisabledArrow: isDisabled,
})}
>
{side==='left'?(<ArrowLeft/>):(<ArrowRight/>)}
</button>
{side === 'left' ? <ArrowLeft /> : <ArrowRight />}
</button>
)
}

39
src/components/common/CartDrawer/components/CartRecommendation/CartRecommendation.tsx
View File

@@ -1,29 +1,30 @@
import { TOptionsEvents } from 'keen-slider';
import React from 'react';
import { ResponsiveType } from 'react-multi-carousel';
import { CarouselCommon, ViewAllItem } from 'src/components/common';
import ProductCard, { ProductCardProps } from 'src/components/common/ProductCard/ProductCard';
import { ROUTE } from 'src/utils/constanst.utils';
import { PRODUCT_DATA_TEST } from 'src/utils/demo-data';
import s from './CartRecommendation.module.scss';
const option: TOptionsEvents = {
slidesPerView: 1.5,
mode: 'free',
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 1.5,
},
'(min-width: 768px)': {
slidesPerView: 2.5,
},
'(min-width: 1008px)': {
slidesPerView: 2.2,
},
'(min-width: 1440px)': {
slidesPerView: 2.5,
}
const RESPONSIVE:ResponsiveType = {
desktop: {
breakpoint: { max: 99999, min: 1440 },
items: 2.5,
slidesToSlide: 1 // optional, default to 1.
},
}
lap: {
breakpoint: { max: 1440, min: 1008 },
items: 2.2,
},
tablet: {
breakpoint: { max: 1008, min: 768 },
items: 2.5,
},
mobile: {
breakpoint: { max: 768, min: 0 },
items: 1.5,
}
};
const CartRecommendation = () => {
return (
@@ -39,7 +40,7 @@ const CartRecommendation = () => {
data={PRODUCT_DATA_TEST}
Component={ProductCard}
itemKey="cart-recommendation"
option={option}
responsive={RESPONSIVE}
defaultComponentProps={{ isSingleButton: true }}
/>
</div>

58
src/components/common/FeaturedProductCard/FeaturedProductCard.module.scss
View File

@@ -1,33 +1,63 @@
@import '../../../styles/utilities';
.featuredProductCardWarpper{
width: 59.8rem;
height: 28.8rem;
// min-width: 30.2rem;
height: 14.4rem;
padding: 2.4rem;
@apply bg-primary-light inline-flex justify-start items-center shape-common;
@apply bg-primary-light inline-flex justify-start items-center shape-common ;
@screen md {
// min-width: 598px;
height: 28.8rem;
padding: 1.6rem 3.2rem 1.6rem 1.6rem;
}
@screen 2xl {
// min-width: 598px;
height: 28.8rem;
padding: 2.4rem 4rem 2.4rem 2.4rem;
}
.left{
width: 24rem;
height: 24rem;
width: 10rem;
height: 10rem;
@screen md {
width: 24rem;
height: 24rem;
}
}
.right{
padding-left: 2.4rem;
min-width: 27rem;
max-width: 28.6rem;
min-height: 16.8rem;
margin-left: 1.2rem;
// min-width: 27rem;
max-width: 16.6rem;
max-height: 10rem;
@apply flex justify-between flex-col;
@screen md {
margin-left: 2.4rem;
max-width: 27.0rem;
min-height: 16.8rem;
}
.rightTop{
min-height: 9.6rem;
min-height: 6rem;
@screen md {
min-height: 9.6rem;
}
@apply flex justify-between flex-col;
.title{
@apply font-bold;
font-size: 2rem;
line-height: 2.8rem;
font-size: 1.2rem;
line-height: 1.6rem;
letter-spacing: -0.01em;
color: var(--text-active);
@screen md {
font-size: 2rem;
line-height: 2.8rem;
}
}
.subTitle{
color: var(--text-base);
font-size: 1.6rem;
line-height: 2.4rem;
font-size: 1.2rem;
line-height: 1.6rem;
@screen md {
font-size: 1.6rem;
line-height: 2.4rem;
}
}
.priceWrapper{
@apply flex justify-start sm-headline;

2
src/components/common/FeaturedProductCard/FeaturedProductCard.tsx
View File

@@ -5,7 +5,7 @@ import { LANGUAGE } from '../../../utils/language.utils'
import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy'
import ButtonCommon from '../ButtonCommon/ButtonCommon'
import { ImgWithLink } from '..'
interface FeaturedProductCardProps extends FeaturedProductProps {
export interface FeaturedProductCardProps extends FeaturedProductProps {
buttonText?: string
}

13
src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
View File

@@ -6,7 +6,7 @@ import { ButtonCommon } from 'src/components/common'
import InputSearch from 'src/components/common/InputSearch/InputSearch'
import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons'
import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import { ACCOUNT_TAB, FILTER_PAGE, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import Logo from '../../../Logo/Logo'
import s from './HeaderMenu.module.scss'
interface Props {
@@ -20,7 +20,6 @@ interface Props {
toggleCart: () => void,
}
const FILTER_PAGE = [ROUTE.HOME, ROUTE.PRODUCTS]
const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
const router = useRouter()
@@ -113,16 +112,6 @@ const HeaderMenu = memo(({ isFull, isStickyHeader, visibleFilter, openModalAuthe
<IconBuy />
</button>
</li>
{
FILTER_PAGE.includes(router.pathname) && (
<li className={s.iconFilterDesk}>
<button className={s.iconFilter} onClick={toggleFilter}>
<IconFilter />
</button>
</li>
)
}
</ul>
</section>
)

1
src/components/common/ImgWithLink/ImgWithLink.tsx
View File

@@ -17,6 +17,7 @@ const ImgWithLink = ({ src, alt, blurDataURL = BLUR_DATA_IMG }: ImgWithLinkProps
className={s.imgWithLink}
placeholder="blur"
blurDataURL={blurDataURL}
draggable='false'
/>
</div>
)

7
src/components/common/Layout/Layout.tsx
View File

@@ -2,7 +2,7 @@ import { CommerceProvider } from '@framework'
import { useRouter } from 'next/router'
import { FC } from 'react'
import { useModalCommon } from 'src/components/hooks'
import { BRAND, CATEGORY, FEATURED, ROUTE } from 'src/utils/constanst.utils'
import { BRAND, CATEGORY, FEATURED, FILTER_PAGE, ROUTE } from 'src/utils/constanst.utils'
import { ScrollToTop } from '..'
import Footer from '../Footer/Footer'
import Header from '../Header/Header'
@@ -16,7 +16,7 @@ interface Props {
// note: demo code
const Layout: FC<Props> = ({ children }) => {
const { locale = 'en-US' } = useRouter()
const { locale = 'en-US', pathname } = useRouter()
const { visible: visibleFilter, openModal: openFilter, closeModal: closeFilter } = useModalCommon({ initialValue: false })
const router = useRouter()
@@ -42,6 +42,9 @@ const Layout: FC<Props> = ({ children }) => {
}
<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter} /> </div>
<ScrollToTop visibilityHeight={1500} />
{
FILTER_PAGE.includes(pathname) && (<div className={s.filter}><MenuNavigationProductList categories={CATEGORY} brands={BRAND} featured={FEATURED} visible={visibleFilter} onClose={closeFilter}/> </div>)
}
<Footer />
</div>
</CommerceProvider>

1
src/components/common/ListProductWithInfo/InfoProducts/InfoProducts.module.scss
View File

@@ -9,6 +9,7 @@
}
}
@screen lg {
max-width: 18.1rem;
@apply block;
margin-right: 4rem;
padding: 0;

10
src/components/common/ListProductWithInfo/ListProductWithInfo.module.scss
View File

@@ -20,13 +20,19 @@
}
.productsWrap {
@apply spacing-horizontal-left;
overflow: hidden;
@screen lg {
max-width: 75%;
flex: 1;
// max-width: 75%;
padding: 0 0.8rem;
> div > div {
@apply shape-common-lg bg-white;
padding: 4rem 0;
}
> div {
margin: 0 2.4;
overflow: visible
}
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
@@ -40,7 +46,7 @@
}
@screen xl {
padding: 0 2.4rem;
max-width: 80%;
// max-width: 80%;
}
}
}

58
src/components/common/ListProductWithInfo/ListProductWithInfo.tsx
View File

@@ -1,6 +1,6 @@
import classNames from 'classnames';
import { TOptionsEvents } from 'keen-slider';
import React from 'react';
import { ResponsiveType } from 'react-multi-carousel';
import CarouselCommon from '../CarouselCommon/CarouselCommon';
import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard';
import InfoProducts from './InfoProducts/InfoProducts';
@@ -12,31 +12,36 @@ interface Props {
subtitle?: string,
hasBorderBottomMobile?: boolean,
}
const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 2,
mode: 'free',
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 3,
},
'(min-width: 768px)': {
slidesPerView: 3,
},
'(min-width: 1008px)': {
slidesPerView: 3.5,
},
'(min-width: 1024px)': {
slidesPerView: 2.5,
},
'(min-width: 1280px)': {
slidesPerView: 3.5,
},
'(min-width: 1440px)': {
slidesPerView: 4.5,
},
},
}
const RESPONSIVE:ResponsiveType = {
xxl: {
breakpoint: { max: 9999, min: 1440 },
items: 4.5,
slidesToSlide: 1 // optional, default to 1.
},
lg: {
breakpoint: { max: 1440, min: 1280 },
items: 3.5,
slidesToSlide: 1 // optional, default to 1.
},
desktop: {
breakpoint: { max: 1280, min: 1024 },
items: 2.5,
slidesToSlide: 1 // optional, default to 1.
},
lap: {
breakpoint: { max: 1024, min: 1008 },
items: 3.5,
},
tablet: {
breakpoint: { max: 1008, min: 640 },
items: 3,
},
mobile: {
breakpoint: { max: 640, min: 0 },
items: 2,
}
};
const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: Props) => {
return (
<div className={classNames({
@@ -51,8 +56,9 @@ const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: P
<CarouselCommon<ProductCardProps>
data={data}
Component={ProductCard}
// draggable={true} infinite={true}
itemKey={title}
option={OPTION_DEFAULT}
responsive={RESPONSIVE}
/>
</div>
</div>

3
src/components/common/ProductCard/ProductCard.module.scss
View File

@@ -3,6 +3,9 @@
min-height: 31.8rem;
padding: 1.2rem 1.2rem 0 1.2rem;
margin: auto;
@screen md {
margin: 0;
}
margin-bottom: 1px;
@apply flex flex-col justify-between;
&.notSell {

1
src/components/common/ProductCard/ProductCard.tsx
View File

@@ -32,7 +32,6 @@ const ProductCard = ({
</div>
}
return (
<div className={s.productCardWarpper}>
<div className={s.cardTop}>

53
src/components/common/ProductCarousel/ProductCarousel.tsx
View File

@@ -1,4 +1,3 @@
import { TOptionsEvents } from 'keen-slider'
import React from 'react'
import CarouselCommon, {
CarouselCommonProps,
@@ -8,38 +7,42 @@ import s from "./ProductCarousel.module.scss"
interface ProductCarouselProps
extends Omit<CarouselCommonProps<ProductCardProps>, 'Component' | "option"> {
option?: TOptionsEvents
}
const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 2,
mode: 'free',
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 3,
},
'(min-width: 768px)': {
slidesPerView: 3,
},
'(min-width: 1008px)': {
slidesPerView: 3.5,
},
'(min-width: 1280px)': {
slidesPerView: 4.5,
},
'(min-width: 1440px)': {
slidesPerView: 5.5,
},
const RESPONSIVE = {
lgScreen: {
breakpoint: { max:9999, min: 1440 },
items: 5.5,
slidesToSlide: 1 // optional, default to 1.
},
}
const ProductCarousel = ({ option, data, ...props }: ProductCarouselProps) => {
desktop: {
breakpoint: { max: 1440, min: 1280 },
items: 4.5,
slidesToSlide: 1 // optional, default to 1.
},
lap: {
breakpoint: { max: 1280, min: 1008 },
items: 3.5,
slidesToSlide: 1 // optional, default to 1.
},
tablet: {
breakpoint: { max: 1008, min: 640 },
items: 3,
},
mobile: {
breakpoint: { max: 640, min: 0 },
items: 2,
}
};
const ProductCarousel = ({ data, responsive= RESPONSIVE, ...props }: ProductCarouselProps) => {
return (
<div className={s.productCardWarpper}>
<CarouselCommon<ProductCardProps>
data={data}
Component={ProductCard}
draggable={true} infinite={true}
responsive={responsive}
isPadding
{...props}
option={{ ...OPTION_DEFAULT, ...option }}
/>
</div>
)

3
src/components/common/QuanittyInput/QuanittyInput.module.scss
View File

@@ -1,9 +1,8 @@
@import '../../../styles/utilities';
.quanittyInputWarper {
@apply shape-common-border;
padding: 0.5px 0;
&::before{
height: 100%;
top: 1px;
background-color: var(--text-active);
}
.inner {

52
src/components/common/RecipeCarousel/RecipeCarousel.tsx
View File

@@ -1,43 +1,47 @@
import { TOptionsEvents } from 'keen-slider'
import React from 'react'
import { ResponsiveType } from 'react-multi-carousel'
import CarouselCommon, {
CarouselCommonProps,
} from '../CarouselCommon/CarouselCommon'
import RecipeCard, { RecipeCardProps } from '../RecipeCard/RecipeCard'
import s from "./RecipeCarousel.module.scss"
import s from './RecipeCarousel.module.scss'
interface RecipeCarouselProps
extends Omit<CarouselCommonProps<RecipeCardProps>, 'Component'|"option"> {
option?:TOptionsEvents
}
extends Omit<CarouselCommonProps<RecipeCardProps>, 'Component' | 'option'> {}
const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 1.25,
mode: 'free',
spacing:24,
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 2,
},
'(min-width: 1024px)': {
slidesPerView: 2.5,
},
'(min-width: 1440px)': {
slidesPerView: 3,
},
'(min-width: 1536px)': {
slidesPerView: 3.5,
},
const RESPONSIVE: ResponsiveType = {
largeDesktop: {
breakpoint: { max: 9999, min: 1536 },
items: 3.5,
slidesToSlide: 1, // optional, default to 1.
},
desktop: {
breakpoint: { max: 1536, min: 1440 },
items: 3,
slidesToSlide: 1, // optional, default to 1.
},
lap: {
breakpoint: { max: 1440, min: 1024 },
items: 2.5,
},
tablet: {
breakpoint: { max: 1024, min: 640 },
items: 2,
},
mobile: {
breakpoint: { max: 640, min: 0 },
items: 1.25,
},
}
const RecipeCarousel = ({ option, data, ...props }: RecipeCarouselProps) => {
const RecipeCarousel = ({ data, ...props }: RecipeCarouselProps) => {
return (
<div className={s.recipeCardWarpper}>
<CarouselCommon<RecipeCardProps>
data={data}
Component={RecipeCard}
{...props}
option={{ ...OPTION_DEFAULT, ...option }}
// option={{ ...OPTION_DEFAULT, ...option }}
responsive={RESPONSIVE}
/>
</div>
)

46
src/components/common/RecommendedRecipes/RecommendedRecipes.tsx
View File

@@ -1,30 +1,34 @@
import { TOptionsEvents } from 'keen-slider';
import React from 'react';
import { ResponsiveType } from 'react-multi-carousel';
import { CarouselCommon, HeadingCommon, RecipeCard, ViewAllItem } from 'src/components/common';
import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard';
import { ROUTE } from 'src/utils/constanst.utils';
import s from './RecommendedRecipes.module.scss';
const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 1.25,
mode: 'free',
spacing: 24,
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 2,
},
'(min-width: 1024px)': {
slidesPerView: 2.5,
},
'(min-width: 1440px)': {
slidesPerView: 3,
},
'(min-width: 1536px)': {
slidesPerView: 3.5,
},
const RESPONSIVE: ResponsiveType = {
largeDesktop: {
breakpoint: { max: 9999, min: 1536 },
items: 3.5,
slidesToSlide: 1, // optional, default to 1.
},
}
desktop: {
breakpoint: { max: 1536, min: 1440 },
items: 3,
slidesToSlide: 1, // optional, default to 1.
},
lap: {
breakpoint: { max: 1440, min: 1024 },
items: 2.5,
},
tablet: {
breakpoint: { max: 1024, min: 640 },
items: 2,
},
mobile: {
breakpoint: { max: 640, min: 0 },
items: 1.25,
},
}
interface Props {
data: RecipeCardProps[],
}
@@ -41,7 +45,7 @@ const RecommendedRecipes = ({ data }: Props) => {
data={data}
Component={RecipeCard}
itemKey="Recommended Recipes"
option={OPTION_DEFAULT}
responsive={RESPONSIVE}
/>
</div>
</div>

48
src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx
View File

@@ -1,43 +1,47 @@
import { TOptionsEvents } from 'keen-slider'
import React from 'react'
import CarouselCommon, {
CarouselCommonProps,
} from '../../CarouselCommon/CarouselCommon'
import BlogCard, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
import s from "./BlogPostCarousel.module.scss"
import { ResponsiveType } from 'react-multi-carousel'
interface BlogPostCarouselProps
extends Omit<CarouselCommonProps<BlogCardProps>, 'Component'|"option"> {
option?:TOptionsEvents
}
const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 1.25,
mode: 'free',
spacing:24,
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 2,
},
'(min-width: 1024px)': {
slidesPerView: 2.5,
},
'(min-width: 1440px)': {
slidesPerView: 3,
},
'(min-width: 1536px)': {
slidesPerView: 3.5,
},
const RESPONSIVE: ResponsiveType = {
largeDesktop: {
breakpoint: { max: 9999, min: 1536 },
items: 3.5,
slidesToSlide: 1, // optional, default to 1.
},
desktop: {
breakpoint: { max: 1536, min: 1440 },
items: 3,
slidesToSlide: 1, // optional, default to 1.
},
lap: {
breakpoint: { max: 1440, min: 1024 },
items: 2.5,
},
tablet: {
breakpoint: { max: 1024, min: 640 },
items: 2,
},
mobile: {
breakpoint: { max: 640, min: 0 },
items: 1.25,
},
}
const BlogPostCarousel = ({ option, data, ...props }: BlogPostCarouselProps) => {
const BlogPostCarousel = ({ data, ...props }: BlogPostCarouselProps) => {
return (
<div className={s.blogCardWarpper}>
<CarouselCommon<BlogCardProps>
data={data}
Component={BlogCard}
{...props}
option={{ ...OPTION_DEFAULT, ...option }}
responsive={RESPONSIVE}
/>
</div>
)

16
src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.module.scss Normal file
View File

@@ -0,0 +1,16 @@
@import '../../../../styles/utilities';
.warpper {
@apply spacing-horizontal;
@screen xl {
:global(.customArrow) {
@screen lg {
&:global(.leftArrow) {
left: calc(-6.4rem - 2rem);
}
&:global(.rightArrow) {
right: calc(-6.4rem - 2rem);
}
}
}
}
}

89
src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx Normal file
View File

@@ -0,0 +1,89 @@
import React from 'react'
import { ResponsiveType } from 'react-multi-carousel'
import { CarouselCommon, FeaturedProductCard } from 'src/components/common'
import { FeaturedProductCardProps } from 'src/components/common/FeaturedProductCard/FeaturedProductCard'
import s from "./FeaturedProductsCarousel.module.scss"
interface FeaturedProductsCarouselProps {
}
const dataDemo:FeaturedProductCardProps[] = [{
title: "Sale 25% Coffee Bean",
subTitle: "50 first Orders within a day",
originPrice: "$20.00",
price: "$14.00",
imageSrc: "https://user-images.githubusercontent.com/76099413/133043628-db7813f9-1bb7-4ee1-b028-dc4295563494.png"
},{
title: "Sale 20% Fruits",
subTitle: "50 first Orders within a day",
originPrice: "$20.00",
price: "$14.00",
imageSrc: "https://user-images.githubusercontent.com/76099413/133043630-07a353b9-573d-4c1d-b1de-2c932e3f14f7.png"
},{
title: "Sale 25% Coffee Bean",
subTitle: "50 first Orders within a day",
originPrice: "$20.00",
price: "$14.00",
imageSrc: "https://user-images.githubusercontent.com/76099413/133043633-954c105b-c703-4e5c-8f5f-7943ad633ff0.png"
}]
const RESPONSIVE: ResponsiveType = {
hugeScreen: {
breakpoint: { max: 9999, min: 1500 },
items: 2.25,
slidesToSlide: 1, // optional, default to 1.
},
largeScreen: {
breakpoint: { max: 1500, min: 1440 },
items: 2.075,
slidesToSlide: 1, // optional, default to 1.
},
largeDesktop: {
breakpoint: { max: 1440, min: 1280 },
items: 1.75,
slidesToSlide: 1, // optional, default to 1.
},
desktop: {
breakpoint: { max: 1280, min: 1148 },
items: 1.5,
slidesToSlide: 1, // optional, default to 1.
},
smallDesktop: {
breakpoint: { max: 1148, min: 1024 },
items: 1.375,
slidesToSlide: 1, // optional, default to 1.
},
lap: {
breakpoint: { max: 1024, min: 968 },
items: 1.75,
},
tablet: {
breakpoint: { max: 968, min: 768 },
items: 1.075,
},
smallTablet: {
breakpoint: { max: 768, min: 640 },
items: 1.25,
},
largeMobile: {
breakpoint: { max: 640, min: 400 },
items: 2,
},
mobile: {
breakpoint: { max: 400, min: 300 },
items: 1.5,
},
smallMobile: {
breakpoint: { max: 300, min: 0 },
items: 1,
},
}
const FeaturedProductsCarousel = ({}: FeaturedProductsCarouselProps) => {
return (
<div className={s.warpper}>
<CarouselCommon<FeaturedProductCardProps> data={dataDemo} Component={FeaturedProductCard} itemKey="featured-products" responsive={RESPONSIVE}/>
</div>
)
}
export default FeaturedProductsCarousel

11
src/components/modules/home/HomeBanner/HomeBanner.module.scss
View File

@@ -1,15 +1,21 @@
@import "../../../../styles/utilities";
.homeBanner {
@apply spacing-horizontal;
@apply spacing-horizontal overflow-hidden;
margin-bottom: 2.8rem;
.left {
@apply hidden;
margin-bottom: 3rem;
max-width: 50rem;
}
@screen xl {
@apply grid;
grid-template-columns: 1fr 1.8fr;
grid-template-columns: 35.75% 64.25%;
// grid-template-columns: 1fr 1.8fr;
> div {
@apply w-full overflow-hidden;
}
.left {
@apply relative flex items-end justify-center shape-common-lg;
margin-right: 1.6rem;
@@ -29,7 +35,6 @@
@apply relative font-heading text-center;
padding: 2.4rem 2.4rem 4.8rem;
width: min-content;
color: var(--white);
font-size: 8.8rem;
line-height: 8rem;

55
src/components/modules/home/HomeFeature/components/HomeFeatureCarousel/HomeFeatureCarousel.tsx
View File

@@ -1,44 +1,49 @@
import React from 'react'
import { TOptionsEvents } from 'keen-slider'
import HomeFeatureItem, {HomeFeatureItemProps} from '../HomeFeatureItem/HomeFeatureItem'
import CarouselCommon, {CarouselCommonProps} from '../../../../../common/CarouselCommon/CarouselCommon'
import { ResponsiveType } from 'react-multi-carousel'
interface HomeFeatureCarouselProps
extends Omit<CarouselCommonProps<HomeFeatureItemProps>, 'Component' | "option"> {
option?: TOptionsEvents
}
const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 1.2,
mode: 'free',
breakpoints: {
'(min-width: 640px)': {
slidesPerView: 1.8,
},
'(min-width: 768px)': {
slidesPerView: 2.1,
},
'(min-width: 1008px)': {
slidesPerView: 2.3,
},
'(min-width: 1280px)': {
slidesPerView: 2.8,
},
'(min-width: 1440px)': {
slidesPerView: 3,
},
const RESPONSIVE: ResponsiveType = {
largeDesktop: {
breakpoint: { max: 9999, min: 1440 },
items: 3,
slidesToSlide: 1, // optional, default to 1.
},
desktop: {
breakpoint: { max: 1440, min: 1280 },
items: 2.8,
slidesToSlide: 1, // optional, default to 1.
},
smallDesktop: {
breakpoint: { max: 1280, min: 1008 },
items: 2.3,
slidesToSlide: 1, // optional, default to 1.
},
lap: {
breakpoint: { max: 1008, min: 768 },
items: 2.1,
},
tablet: {
breakpoint: { max: 768, min: 640 },
items: 1.8,
},
mobile: {
breakpoint: { max: 640, min: 0 },
items: 1.2,
},
}
const HomeFeatureCarousel = ({option, data, ...props} : HomeFeatureCarouselProps) => {
const HomeFeatureCarousel = ({data, ...props} : HomeFeatureCarouselProps) => {
return (
<div>
<CarouselCommon<HomeFeatureItemProps>
data={data}
Component={HomeFeatureItem}
{...props}
option={{ ...OPTION_DEFAULT, ...option }}
responsive={RESPONSIVE}
/>
</div>
)

1
src/components/modules/home/index.ts
View File

@@ -6,4 +6,5 @@ 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'
export { default as FeaturedProductsCarousel } from './FeaturedProductsCarousel/FeaturedProductsCarousel'
export { default as HomeFeature } from './HomeFeature/HomeFeature'

4
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.module.scss
View File

@@ -8,5 +8,9 @@
}
> div {
width: 100%;
// > div {
// height: 100%;
// }
}
}

16
src/components/modules/product-detail/ProductInfoDetail/components/ProductImgs/ProductImgs.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react'
import { ResponsiveType } from 'react-multi-carousel'
import { CarouselCommon } from 'src/components/common'
import ProductImgItem, { ProductImgItemProps } from '../ProductImgItem/ProductImgItem'
import s from './ProductImgs.module.scss'
@@ -23,10 +24,13 @@ const DATA = [
}
]
const option = {
slidesPerView: 1,
}
const RESPONSIVE: ResponsiveType = {
desktop: {
breakpoint: { max: 9999, min: 0 },
items: 1,
slidesToSlide: 1, // optional, default to 1.
},
}
const ProductImgs = ({ }: Props) => {
return (
<section className={s.productImgs}>
@@ -34,8 +38,8 @@ const ProductImgs = ({ }: Props) => {
data={DATA}
itemKey="product-detail-img"
Component={ProductImgItem}
option={option}
isDot={true}
responsive={RESPONSIVE}
showDots={true}
/>
</section >
)

6
src/components/modules/product-list/ProductListBanner/ProductListBanner.tsx
View File

@@ -16,6 +16,12 @@ const ProductListBanner = ({ }: Props) => {
subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
imgLink: BannerRight.src,
size: "large",
},
{
title: "Save 15% on your first order",
subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
imgLink: BannerRight.src,
size: "large",
}
]
}

3
src/components/modules/product-list/ProductListFilter/ProductListFilter.module.scss
View File

@@ -14,9 +14,10 @@
@apply flex;
}
.categories{
padding-right: 2.4rem;
@apply hidden;
@screen md {
@apply hidden;
@apply block;
}
@screen xl{
@apply block;

4
src/styles/_base.scss
View File

@@ -1,4 +1,4 @@
@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&display=swap");
@import '../../public/fonts/style.css';
:root {
@@ -42,7 +42,7 @@
--line-height: 2.4rem;
--font-sans: "Nunito", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--font-heading: "Norquay-bold", "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--font-heading: "Norquay-bold", monospace, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
--font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
}

4
src/utils/constanst.utils.ts
View File

@@ -125,6 +125,8 @@ export const FEATURED = [
export const DEFAULT_BLOG_PAGE_SIZE=6;
export const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
export const STATE_OPTIONS = [
{
name: 'Hồ Chí Minh',
@@ -134,4 +136,4 @@ export const STATE_OPTIONS = [
name: 'Hà Nội',
value: 'Hà Nội',
},
]
]

2435
yarn.lock
View File

File diff suppressed because it is too large Load Diff