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

🐛 bug: carousel

Browse Source 
:%s
This commit is contained in:
DatNguyen
2021-09-20 10:41:23 +07:00
parent 463e7c9023 f8f1a07cfc
commit acb709f5ad
13 changed files with 51 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@@ -3,6 +3,7 @@ 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[],
@@ -29,13 +30,15 @@ const Banner = memo(({ data }: Props) => {
/>
}
return (
<CarouselCommon<BannerItemProps>
data={data}
itemKey="banner"
Component={BannerItem}
responsive={RESPONSIVE}
showDots={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");

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

@@ -72,13 +72,14 @@ const CarouselCommon = <T,>({
responsive={responsive}
arrows={false}
renderDotsOutside={true}
ssr={true}
// customLeftArrow={<CustomCarouselArrow side="left" />}
// customRightArrow={<CustomCarouselArrow side="right" />}
>
{data?.map((props, index) => {
{data.map((props, index) => {
const allProps = defaultComponentProps
? { ...props, ...defaultComponentProps }
: props
? { ...props, ...defaultComponentProps }
: props
return <Component {...allProps} key={`${itemKey}-${index}`} />
})}
</Carousel>

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%;
}
}
}

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

@@ -80,6 +80,7 @@ const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: P
<CarouselCommon<ProductCardProps>
data={data}
Component={ProductCard}
// draggable={true} infinite={true}
itemKey={title}
responsive={RESPONSIVE}
/>

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}>

9
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: 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;

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

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

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

@@ -26,7 +26,7 @@ const DATA = [
const RESPONSIVE: ResponsiveType = {
desktop: {
breakpoint: { max: 999, min: 0 },
breakpoint: { max: 9999, min: 0 },
items: 1,
slidesToSlide: 1, // optional, default to 1.
},

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",
}
]
}

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;
}