crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-21 11:51:20 +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'; @import '../../../styles/utilities';
.blogPostWarpper { .blogPostWarpper {
&.cream{
background-color: #F5F4F2;
}
padding-top: 5.6rem; padding-top: 5.6rem;
padding-bottom: 5.2rem; padding-bottom: 5.2rem;
@apply flex flex-col; @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 image15 from '../../../../public/assets/images/image15.png'
import image16 from '../../../../public/assets/images/image16.png' import image16 from '../../../../public/assets/images/image16.png'
import image17 from '../../../../public/assets/images/image17.png' import image17 from '../../../../public/assets/images/image17.png'
import classNames from 'classnames'
import React from 'react' import React from 'react'
import { HeadingCommon, ViewAllItem } from 'src/components/common' import { HeadingCommon, ViewAllItem } from 'src/components/common'
import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog' 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'; import { ROUTE } from 'src/utils/constanst.utils';
interface RelevantProps { interface RelevantProps {
data?: BlogCardProps[] data?: BlogCardProps[],
itemKey?: string itemKey?: string,
title?: string title?: string,
viewAllLink?: string viewAllLink?: string,
bgcolor: "default" | "cream"
} }
const recipe:BlogCardProps[] = [ const recipe:BlogCardProps[] = [
@ -48,9 +50,13 @@ const recipe:BlogCardProps[] = [
link: `${ROUTE.BLOG_DETAIL}` 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 ( return (
<div className={s.blogPostWarpper}> <div className={classNames({
[s.blogPostWarpper] : true,
[s[bgcolor]] : bgcolor,
})}
>
<div className={s.top}> <div className={s.top}>
<div className={s.left}> <div className={s.left}>
<HeadingCommon>{title}</HeadingCommon> <HeadingCommon>{title}</HeadingCommon>