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

🔨 refactor: carouselcommn

Browse Source 
:%s
This commit is contained in:
unknown
2021-09-17 09:57:03 +07:00
parent 861b1b9fb5
commit 3b27d38a59
18 changed files with 1653 additions and 1529 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" />
/// <reference types="next/types/global" /> /// <reference types="next/types/global" />
/// <reference types="next/image-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.

1
package.json
View File

@@ -44,6 +44,7 @@
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"react-fast-marquee": "^1.1.4", "react-fast-marquee": "^1.1.4",
"react-merge-refs": "^1.1.0", "react-merge-refs": "^1.1.0",
"react-multi-carousel": "^2.6.5",
"react-player": "^2.9.0", "react-player": "^2.9.0",
"react-use-measure": "^2.0.4", "react-use-measure": "^2.0.4",
"sass": "^1.38.0", "sass": "^1.38.0",

132
pages/test.tsx
View File

@@ -1,74 +1,12 @@
import { CartDrawer, Layout } from 'src/components/common' import { CarouselCommon, ProductCard, Layout } from 'src/components/common'
import MenuNavigationProductList from 'src/components/common/MenuNavigationProductList/MenuNavigationProductList'
// 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 { useModalCommon } from 'src/components/hooks' import { useModalCommon } from 'src/components/hooks'
import {
CollectionCarcousel,
HomeCollection,
} from 'src/components/modules/home'
import { PRODUCT_DATA_TEST } from 'src/utils/demo-data' import { PRODUCT_DATA_TEST } from 'src/utils/demo-data'
import { useKeenSlider } from 'keen-slider/react' import { useKeenSlider } from 'keen-slider/react'
import { CSSProperties } from 'react' import { CSSProperties } from 'react'
const CATEGORY = [ import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard'
{ import ColectionCarcousel from 'src/components/modules/home/CollectionCarcousel/CollectionCarcousel'
name: 'All', import { HomeCollection } from 'src/components/modules/home'
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: 'Maggi',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=veggie`,
},
{
name: 'Cholimes',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=seafood`,
},
{
name: 'Chinsu',
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=frozen`,
},
]
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() { export default function Test() {
const { const {
visible: visibleMenuFilter, visible: visibleMenuFilter,
@@ -95,51 +33,27 @@ export default function Test() {
maxHeight: '100vh', maxHeight: '100vh',
} }
const [sliderRef] = useKeenSlider<HTMLDivElement>({ slidesPerView: 2 }) const [sliderRef] = useKeenSlider<HTMLDivElement>({ slidesPerView: 2 })
const RESPONSIVE = {
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 5.5,
slidesToSlide: 1 // optional, default to 1.
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
slidesToSlide: 1 // optional, default to 1.
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
slidesToSlide: 1 // optional, default to 1.
}
};
return ( return (
<> <>
{/* <HomeCollection /> */} <HomeCollection />
{/* <CollectionCarcousel {/* <CarouselCommon<ProductCardProps> showDots={true} draggable={true} infinite={true} data={PRODUCT_DATA_TEST} Component={ProductCard} responsive={RESPONSIVE} itemKey="tets"/> */}
data={PRODUCT_DATA_TEST}
itemKey="tesst"
category="test"
title="test"
subtitle=""
/> */}
<div ref={sliderRef} className="keen-slider">
{/* {[...Array(10).keys()].map(() => {
return (
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
)
})} */}
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
<div className="keen-slider__slide number-slide1" style={style}>
1
</div>
</div>
</> </>
) )
} }

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

@@ -1,5 +1,6 @@
import { TOptionsEvents } from 'keen-slider' import { TOptionsEvents } from 'keen-slider'
import React, { memo } from 'react' import React, { memo } from 'react'
import { ResponsiveType } from 'react-multi-carousel'
import CarouselCommon from '../CarouselCommon/CarouselCommon' import CarouselCommon from '../CarouselCommon/CarouselCommon'
import BannerItem, { BannerItemProps } from './BannerItem/BannerItem' import BannerItem, { BannerItemProps } from './BannerItem/BannerItem'
@@ -7,10 +8,13 @@ interface Props {
data: BannerItemProps[], data: BannerItemProps[],
} }
const option: TOptionsEvents = { const RESPONSIVE:ResponsiveType = {
slidesPerView: 1, desktop: {
mode: 'free', breakpoint: { max: 9999, min: 0 },
} items: 1,
},
};
const Banner = memo(({ data }: Props) => { const Banner = memo(({ data }: Props) => {
if (data.length === 1) { if (data.length === 1) {
const item = data[0] const item = data[0]
@@ -28,8 +32,8 @@ const Banner = memo(({ data }: Props) => {
data={data} data={data}
itemKey="banner" itemKey="banner"
Component={BannerItem} Component={BannerItem}
option={option} responsive={RESPONSIVE}
isDot={true} showDots={true}
/> />
) )
}) })

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

@@ -3,57 +3,72 @@
@apply relative; @apply relative;
min-height: theme('caroucel.arrow-height'); min-height: theme('caroucel.arrow-height');
.isPadding { .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) { :global(.customArrow) {
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: .8rem; border-radius: 0.8rem;
backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px);
&:focus { &:focus {
outline: none; outline: none;
} }
@apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100; @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100;
&:global(.leftArrow) { &:global(.leftArrow) {
@apply hidden left-0; @apply hidden left-0;
@screen md { @screen md {
@apply flex @apply flex;
} }
} }
&:global(.rightArrow) { &:global(.rightArrow) {
@apply hidden right-0; @apply hidden right-0;
@screen md { @screen md {
@apply flex; @apply flex;
} }
} }
&:global(.isDisabledArrow) { &:global(.isDisabledArrow) {
@apply hidden; @apply hidden;
} }
} }
:global { :global {
.dots { .dots {
display: flex; display: flex;
padding: 1rem 0; padding: 1rem 0;
justify-content: center; justify-content: center;
} }
.dot { .dot {
border: none; border: none;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
background: #c5c5c5; background: #c5c5c5;
border-radius: 50%; border-radius: 50%;
margin: 0 0.5rem; margin: 0 0.5rem;
padding: 0.5rem; padding: 0.5rem;
cursor: pointer; cursor: pointer;
} }
.dot:focus { .dot:focus {
outline: none; outline: none;
} }
.dot.active { .dot.active {
background: #000; background: #000;
} }
} }
} }

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

@@ -1,85 +1,88 @@
import { useKeenSlider } from 'keen-slider/react' import React, { useEffect, useRef } from 'react'
import React, { useEffect } from 'react'
import 'keen-slider/keen-slider.min.css' import 'keen-slider/keen-slider.min.css'
import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow' import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'
import s from './CarouselCommon.module.scss' import s from './CarouselCommon.module.scss'
import { TOptionsEvents } from 'keen-slider'
import classNames from 'classnames' import classNames from 'classnames'
import CustomDot from './CustomDot/CustomDot' import Carousel from 'react-multi-carousel'
export interface CarouselCommonProps<T> { 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[] data: T[]
Component: React.ComponentType<T> Component: React.ComponentType<T>
isArrow?: Boolean
isDot?: Boolean
itemKey: String itemKey: String
option: TOptionsEvents
keenClassname?: string keenClassname?: string
isPadding?: boolean isPadding?: boolean
defaultComponentProps?: object 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,>({ const CarouselCommon = <T,>({
data=[], data = [],
Component, Component,
itemKey, itemKey,
keenClassname,
isPadding = false,
isArrow = true,
isDot = false,
defaultComponentProps, defaultComponentProps,
option: { slideChanged,slidesPerView, ...sliderOption }, responsive = RESPONSIVE,
showDots,
isPadding,
arrows,
...props
}: CarouselCommonProps<T>) => { }: CarouselCommonProps<T>) => {
const [currentSlide, setCurrentSlide] = React.useState(0) const carousel = useRef<Carousel>(null)
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 handleRightArrowClick = () => { const handleRightArrowClick = () => {
slider.next() carousel.current?.next(carousel.current.props.slidesToSlide||1)
} }
const handleLeftArrowClick = () => { const handleLeftArrowClick = () => {
slider.prev() carousel.current?.previous(carousel.current.props.slidesToSlide||1)
}
const onDotClick = (index:number) => {
slider.moveToSlideRelative(index)
} }
return ( return (
<div className={s.navigationWrapper}> <div className={s.navigationWrapper}>
<div <Carousel
ref={sliderRef} {...props}
className={classNames('keen-slider', keenClassname, { ref={carousel}
showDots={showDots}
customButtonGroup={<CarouselButtonGroup />}
renderButtonGroupOutside
sliderClass={''}
containerClass={classNames({
[s.showDots]: showDots,
[s.isPadding]: isPadding, [s.isPadding]: isPadding,
})} })}
responsive={responsive}
arrows={false}
renderDotsOutside={true}
// customLeftArrow={<CustomCarouselArrow side="left" />}
// customRightArrow={<CustomCarouselArrow side="right" />}
> >
{data?.map((props, index) => { {data?.map((props, index) => {
const allProps = defaultComponentProps ? { ...props, ...defaultComponentProps } : props const allProps = defaultComponentProps
return ( ? { ...props, ...defaultComponentProps }
<div className="keen-slider__slide" key={`${itemKey}-${index}`}> : props
<Component {...allProps} /> return <Component {...allProps} key={`${itemKey}-${index}`} />
</div>
)
})} })}
</div> </Carousel>
{slider && isArrow && ( {carousel && arrows && (
<> <>
<CustomCarouselArrow <CustomCarouselArrow
side="right" side="right"
@@ -91,7 +94,7 @@ const CarouselCommon = <T,>({
/> />
</> </>
)} )}
{slider && isDot && ( {/* {slider && isDot && (
<div className="dots"> <div className="dots">
{dotArr.map((index) => { {dotArr.map((index) => {
return ( return (
@@ -99,9 +102,16 @@ const CarouselCommon = <T,>({
) )
})} })}
</div> </div>
)} )} */}
</div> </div>
) )
} }
const CarouselButtonGroup = ({ next, previous }: ButtonGroupProps) => {
return (
<>
<CustomCarouselArrow side="left" onClick={previous} />
<CustomCarouselArrow side="right" onClick={next} />
</>
)
}
export default CarouselCommon 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 React from 'react'
import ArrowLeft from 'src/components/icons/ArrowLeft' import ArrowLeft from 'src/components/icons/ArrowLeft'
import ArrowRight from 'src/components/icons/ArrowRight' import ArrowRight from 'src/components/icons/ArrowRight'
import "./CustomCarouselArrow.module.scss" import './CustomCarouselArrow.module.scss'
import { ArrowProps } from 'react-multi-carousel/lib/types'
interface CustomCarouselArrowProps interface CustomCarouselArrowProps extends ArrowProps {
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
side: 'left' | 'right' side: 'left' | 'right'
isDisabled?:Boolean isDisabled?: Boolean
} }
export const CustomCarouselArrow = ({ export const CustomCarouselArrow = ({
side,isDisabled, side,
...props isDisabled,
onClick,
}: CustomCarouselArrowProps) => { }: CustomCarouselArrowProps) => {
const handleClick = () => {
onClick && onClick()
}
return ( return (
<button <button
{...props} onClick={handleClick}
className={classNames("customArrow", { [`${side}Arrow`]: side,"isDisabledArrow":isDisabled})} className={classNames('customArrow', {
[`${side}Arrow`]: side,
isDisabledArrow: isDisabled,
})}
> >
{side==='left'?(<ArrowLeft/>):(<ArrowRight/>)} {side === 'left' ? <ArrowLeft /> : <ArrowRight />}
</button> </button>
) )
} }

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

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

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} className={s.imgWithLink}
placeholder="blur" placeholder="blur"
blurDataURL={blurDataURL} blurDataURL={blurDataURL}
draggable='false'
/> />
</div> </div>
) )

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

@@ -1,6 +1,7 @@
import classNames from 'classnames'; import classNames from 'classnames';
import { TOptionsEvents } from 'keen-slider'; import { TOptionsEvents } from 'keen-slider';
import React from 'react'; import React from 'react';
import { ResponsiveType } from 'react-multi-carousel';
import CarouselCommon from '../CarouselCommon/CarouselCommon'; import CarouselCommon from '../CarouselCommon/CarouselCommon';
import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard'; import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard';
import InfoProducts from './InfoProducts/InfoProducts'; import InfoProducts from './InfoProducts/InfoProducts';
@@ -36,7 +37,35 @@ const OPTION_DEFAULT: TOptionsEvents = {
}, },
}, },
} }
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) => { const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: Props) => {
return ( return (
<div className={classNames({ <div className={classNames({
@@ -52,7 +81,7 @@ const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: P
data={data} data={data}
Component={ProductCard} Component={ProductCard}
itemKey={title} itemKey={title}
option={OPTION_DEFAULT} responsive={RESPONSIVE}
/> />
</div> </div>
</div> </div>

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

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

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

@@ -1,20 +1,19 @@
import { TOptionsEvents } from 'keen-slider' import { TOptionsEvents } from 'keen-slider'
import React from 'react' import React from 'react'
import { ResponsiveType } from 'react-multi-carousel'
import CarouselCommon, { import CarouselCommon, {
CarouselCommonProps, CarouselCommonProps,
} from '../CarouselCommon/CarouselCommon' } from '../CarouselCommon/CarouselCommon'
import RecipeCard, { RecipeCardProps } from '../RecipeCard/RecipeCard' import RecipeCard, { RecipeCardProps } from '../RecipeCard/RecipeCard'
import s from "./RecipeCarousel.module.scss" import s from './RecipeCarousel.module.scss'
interface RecipeCarouselProps interface RecipeCarouselProps
extends Omit<CarouselCommonProps<RecipeCardProps>, 'Component'|"option"> { extends Omit<CarouselCommonProps<RecipeCardProps>, 'Component' | 'option'> {}
option?:TOptionsEvents
}
const OPTION_DEFAULT: TOptionsEvents = { const OPTION_DEFAULT: TOptionsEvents = {
slidesPerView: 1.25, slidesPerView: 1.25,
mode: 'free', mode: 'free',
spacing:24, spacing: 24,
breakpoints: { breakpoints: {
'(min-width: 640px)': { '(min-width: 640px)': {
slidesPerView: 2, slidesPerView: 2,
@@ -30,14 +29,39 @@ const OPTION_DEFAULT: TOptionsEvents = {
}, },
}, },
} }
const RecipeCarousel = ({ option, data, ...props }: RecipeCarouselProps) => { 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 = ({ data, ...props }: RecipeCarouselProps) => {
return ( return (
<div className={s.recipeCardWarpper}> <div className={s.recipeCardWarpper}>
<CarouselCommon<RecipeCardProps> <CarouselCommon<RecipeCardProps>
data={data} data={data}
Component={RecipeCard} Component={RecipeCard}
{...props} {...props}
option={{ ...OPTION_DEFAULT, ...option }} // option={{ ...OPTION_DEFAULT, ...option }}
responsive={RESPONSIVE}
/> />
</div> </div>
) )

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

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

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

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

49
src/components/modules/home/FeaturedProductsCarousel/FeaturedProductsCarousel.tsx
View File

@@ -1,5 +1,6 @@
import { TOptionsEvents } from 'keen-slider' import { TOptionsEvents } from 'keen-slider'
import React from 'react' import React from 'react'
import { ResponsiveType } from 'react-multi-carousel'
import { CarouselCommon, FeaturedProductCard } from 'src/components/common' import { CarouselCommon, FeaturedProductCard } from 'src/components/common'
import { FeaturedProductCardProps } from 'src/components/common/FeaturedProductCard/FeaturedProductCard' import { FeaturedProductCardProps } from 'src/components/common/FeaturedProductCard/FeaturedProductCard'
import s from "./FeaturedProductsCarousel.module.scss" import s from "./FeaturedProductsCarousel.module.scss"
@@ -57,11 +58,57 @@ const OPTION_DEFAULT: TOptionsEvents = {
}, },
}, },
} }
const RESPONSIVE: ResponsiveType = {
largeScreen: {
breakpoint: { max: 9999, 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) => { const FeaturedProductsCarousel = ({}: FeaturedProductsCarouselProps) => {
return ( return (
<div className={s.warpper}> <div className={s.warpper}>
<CarouselCommon<FeaturedProductCardProps> data={dataDemo} Component={FeaturedProductCard} itemKey="featured-products" option={OPTION_DEFAULT}/> <CarouselCommon<FeaturedProductCardProps> data={dataDemo} Component={FeaturedProductCard} itemKey="featured-products" responsive={RESPONSIVE}/>
</div> </div>
) )
} }

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

@@ -3,10 +3,10 @@ import { TOptionsEvents } from 'keen-slider'
import HomeFeatureItem, {HomeFeatureItemProps} from '../HomeFeatureItem/HomeFeatureItem' import HomeFeatureItem, {HomeFeatureItemProps} from '../HomeFeatureItem/HomeFeatureItem'
import CarouselCommon, {CarouselCommonProps} from '../../../../../common/CarouselCommon/CarouselCommon' import CarouselCommon, {CarouselCommonProps} from '../../../../../common/CarouselCommon/CarouselCommon'
import { ResponsiveType } from 'react-multi-carousel'
interface HomeFeatureCarouselProps interface HomeFeatureCarouselProps
extends Omit<CarouselCommonProps<HomeFeatureItemProps>, 'Component' | "option"> { extends Omit<CarouselCommonProps<HomeFeatureItemProps>, 'Component' | "option"> {
option?: TOptionsEvents
} }
const OPTION_DEFAULT: TOptionsEvents = { const OPTION_DEFAULT: TOptionsEvents = {
@@ -30,15 +30,43 @@ const OPTION_DEFAULT: TOptionsEvents = {
}, },
}, },
} }
const RESPONSIVE: ResponsiveType = {
const HomeFeatureCarousel = ({option, data, ...props} : HomeFeatureCarouselProps) => { 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 = ({data, ...props} : HomeFeatureCarouselProps) => {
return ( return (
<div> <div>
<CarouselCommon<HomeFeatureItemProps> <CarouselCommon<HomeFeatureItemProps>
data={data} data={data}
Component={HomeFeatureItem} Component={HomeFeatureItem}
{...props} {...props}
option={{ ...OPTION_DEFAULT, ...option }} responsive={RESPONSIVE}
/> />
</div> </div>
) )

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

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

2432
yarn.lock
View File

File diff suppressed because it is too large Load Diff