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

styles: add bg color option RelevantBlogPosts

Browse Source
This commit is contained in:
unknown 2021-09-08 10:35:33 +07:00
parent 0f6cdc9f66
commit 83fcfc3d65
2 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,9 @@
@import '../../../styles/utilities';
.blogPostWarpper {
&.cream{
background-color: #F5F4F2;
}
padding-top: 5.6rem;
padding-bottom: 5.2rem;
@apply flex flex-col;

18
src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx
View File

@ -1,6 +1,7 @@
import image15 from '../../../../public/assets/images/image15.png'
import image16 from '../../../../public/assets/images/image16.png'
import image17 from '../../../../public/assets/images/image17.png'
import classNames from 'classnames'
import React from 'react'
import { HeadingCommon, ViewAllItem } from 'src/components/common'
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
@ -9,10 +10,11 @@ import s from './RelevantBlogPosts.module.scss'
import { ROUTE } from 'src/utils/constanst.utils';
interface RelevantProps {
data?: BlogCardProps[]
itemKey?: string
title?: string
viewAllLink?: string
data?: BlogCardProps[],
itemKey?: string,
title?: string,
viewAllLink?: string,
bgcolor: "default" | "cream"
}
const recipe:BlogCardProps[] = [
@ -48,9 +50,13 @@ const recipe:BlogCardProps[] = [
link: `${ROUTE.BLOG_DETAIL}`
}]
const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts" }: RelevantProps) => {
const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {
return (
<div className={s.blogPostWarpper}>
<div className={classNames({
[s.blogPostWarpper] : true,
[s[bgcolor]] : bgcolor,
})}
>
<div className={s.top}>
<div className={s.left}>
<HeadingCommon>{title}</HeadingCommon>