🐛 bug: banner home buggy when display in carousel

:%s
This commit is contained in:
lytrankieio123
2021-09-17 17:10:18 +07:00
parent 3fb76cb8e2
commit f8f1a07cfc
7 changed files with 32 additions and 12 deletions

View File

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

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[],
@@ -28,13 +29,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>
)
})

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");

View File

@@ -72,6 +72,7 @@ const CarouselCommon = <T,>({
responsive={responsive}
arrows={false}
renderDotsOutside={true}
ssr={true}
// customLeftArrow={<CustomCarouselArrow side="left" />}
// customRightArrow={<CustomCarouselArrow side="right" />}
>

View File

@@ -1,15 +1,20 @@
@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;
> div {
@apply w-full overflow-hidden;
}
.left {
@apply relative flex items-end justify-center shape-common-lg;
margin-right: 1.6rem;
@@ -29,7 +34,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;

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

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