mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
🐛 bug: banner home buggy when display in carousel
:%s
This commit is contained in:
parent
3fb76cb8e2
commit
f8f1a07cfc
@ -0,0 +1,3 @@
|
||||
.bannerWrap {
|
||||
@apply w-full;
|
||||
}
|
@ -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>
|
||||
)
|
||||
})
|
||||
|
||||
|
@ -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");
|
||||
|
@ -72,6 +72,7 @@ const CarouselCommon = <T,>({
|
||||
responsive={responsive}
|
||||
arrows={false}
|
||||
renderDotsOutside={true}
|
||||
ssr={true}
|
||||
// customLeftArrow={<CustomCarouselArrow side="left" />}
|
||||
// customRightArrow={<CustomCarouselArrow side="right" />}
|
||||
>
|
||||
|
@ -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;
|
||||
|
@ -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",
|
||||
}
|
||||
]
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user