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

styles: banner common

Browse Source
This commit is contained in:
lytrankieio123
2021-09-13 10:30:09 +07:00
parent 2e3def034e
commit 50725d982f
4 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pages/product/[slug].tsx
View File

@@ -1,7 +1,7 @@
import { Layout, RecipeDetail } from 'src/components/common' import { Layout, RecipeDetail, RelevantBlogPosts } from 'src/components/common'
import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail' import { ProductInfoDetail, RecommendedRecipes, ReleventProducts, ViewedProducts } from 'src/components/modules/product-detail'
import { INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data' import { BLOGS_DATA_TEST, INGREDIENT_DATA_TEST, RECIPE_DATA_TEST } from 'src/utils/demo-data'
export default function Slug() { export default function Slug() {
return <> return <>
@@ -10,6 +10,7 @@ export default function Slug() {
<RecommendedRecipes data={RECIPE_DATA_TEST} /> <RecommendedRecipes data={RECIPE_DATA_TEST} />
<ReleventProducts /> <ReleventProducts />
<ViewedProducts /> <ViewedProducts />
<RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also" bgcolor="cream"/>
</> </>
} }

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

@@ -11,13 +11,24 @@ const option = {
breakpoints: {} breakpoints: {}
} }
const Banner = memo(({ data }: Props) => { const Banner = memo(({ data }: Props) => {
if (data.length === 1) {
const item = data[0]
return <BannerItem
title={item.title}
imgLink={item.imgLink}
subtitle={item.subtitle}
buttonLabel={item.buttonLabel}
linkButton={item.linkButton}
size={item.size}
/>
}
return ( return (
<CarouselCommon<BannerItemProps> <CarouselCommon<BannerItemProps>
data={data} data={data}
itemKey="banner" itemKey="banner"
Component={BannerItem} Component={BannerItem}
option={option} option={option}
isDot = {true} isDot={true}
/> />
) )
}) })

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

@@ -1,31 +1,28 @@
@import "../../../../styles/utilities"; @import "../../../../styles/utilities";
.bannerItem { .bannerItem {
@apply bg-primary-light custom-border-radius-lg overflow-hidden; @apply bg-primary-light shape-common-lg overflow-hidden;
@screen md { padding: 0;
border: 1px solid var(--primary);
}
&.large { &.large {
margin-bottom: 2.8rem; margin-bottom: 2.8rem;
.inner { .inner {
@screen xl { background-size: cover;
@apply bg-right-bottom; background-position: right bottom;
background-size: unset;
}
} }
} }
.inner { .inner {
@apply bg-no-repeat; @apply bg-no-repeat;
background-size: 90%; background-size: 90%;
background-position: right -500% bottom 0%; background-position: right -500% bottom 0%;
.content { .content {
background-image: linear-gradient( background-image: linear-gradient(
to right, to right,
rgb(227, 242, 233, 0.9), rgb(227, 242, 233) 63%,
rgb(227, 242, 233, 0.5) 80%,
rgb(227, 242, 233, 0) rgb(227, 242, 233, 0)
); );
padding: 1.6rem;
padding: 2rem;
padding-bottom: 4rem;
max-width: 37rem; max-width: 37rem;
@screen md { @screen md {
max-width: 49.6rem; max-width: 49.6rem;
@@ -38,9 +35,6 @@
} }
.subHeading { .subHeading {
@apply sub-headline; @apply sub-headline;
@screen md {
@apply caption;
}
} }
} }

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

@@ -16,7 +16,7 @@ const ProductListBanner = ({ }: Props) => {
subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.", subtitle: "Last call! Shop deep deals on 100+ bulk picks while you can.",
imgLink: BannerRight.src, imgLink: BannerRight.src,
size: "large", size: "large",
}, }
] ]
} }
/> />