mirror of
https://github.com/vercel/commerce.git
synced 2025-07-22 12:24:18 +00:00
🎨 styles: border viewed product in product detail
:%s
This commit is contained in:
@@ -10,7 +10,7 @@ export default function Slug() {
|
||||
<RecommendedRecipes data={RECIPE_DATA_TEST} />
|
||||
<ReleventProducts />
|
||||
<ViewedProducts />
|
||||
<RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also" bgcolor="cream"/>
|
||||
<RelevantBlogPosts data={BLOGS_DATA_TEST} title="You will like also"/>
|
||||
</>
|
||||
}
|
||||
|
||||
|
@@ -3,9 +3,11 @@
|
||||
.listProductWithInfo {
|
||||
background-color: var(--background);
|
||||
border-top: 1rem solid var(--gray);
|
||||
border-bottom: 1rem solid var(--gray);
|
||||
padding-top: 6rem;
|
||||
padding-bottom: 6rem;
|
||||
&.borderBottom {
|
||||
border-bottom: 1rem solid var(--gray);
|
||||
}
|
||||
@screen lg {
|
||||
@apply flex spacing-horizontal-left;
|
||||
padding-top: 5.6rem;
|
||||
@@ -17,7 +19,7 @@
|
||||
@apply spacing-horizontal-left;
|
||||
@screen lg {
|
||||
max-width: 75%;
|
||||
padding: 0 .8rem;
|
||||
padding: 0 0.8rem;
|
||||
> div > div {
|
||||
@apply shape-common-lg bg-white;
|
||||
padding: 4rem 0;
|
||||
|
@@ -1,3 +1,4 @@
|
||||
import classNames from 'classnames';
|
||||
import { TOptionsEvents } from 'keen-slider';
|
||||
import React from 'react';
|
||||
import CarouselCommon from '../CarouselCommon/CarouselCommon';
|
||||
@@ -9,6 +10,7 @@ interface Props {
|
||||
data: ProductCardProps[],
|
||||
title: string,
|
||||
subtitle?: string,
|
||||
hasBorderBottomMobile?: boolean,
|
||||
}
|
||||
const OPTION_DEFAULT: TOptionsEvents = {
|
||||
slidesPerView: 2,
|
||||
@@ -35,9 +37,12 @@ const OPTION_DEFAULT: TOptionsEvents = {
|
||||
},
|
||||
}
|
||||
|
||||
const ListProductWithInfo = ({ data, title, subtitle }: Props) => {
|
||||
const ListProductWithInfo = ({ data, title, subtitle, hasBorderBottomMobile }: Props) => {
|
||||
return (
|
||||
<div className={s.listProductWithInfo}>
|
||||
<div className={classNames({
|
||||
[s.listProductWithInfo]: true,
|
||||
[s.borderBottom]: hasBorderBottomMobile,
|
||||
})}>
|
||||
<InfoProducts
|
||||
title={title}
|
||||
subtitle={subtitle}
|
||||
|
@@ -8,6 +8,7 @@ const ViewedProducts = () => {
|
||||
title="viewed Products"
|
||||
subtitle="Last call! Shop deep deals on 100+ bulk picks while you can."
|
||||
data={PRODUCT_DATA_TEST}
|
||||
hasBorderBottomMobile={true}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
Reference in New Issue
Block a user