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

✨ feat: Home Feature

Browse Source
This commit is contained in:
quocsonnguyen 2021-08-27 12:32:20 +07:00
parent 9df2484d60
commit 558a3de4a6
3 changed files with 17 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/modules/home/HomeFeature/components/HomeFeature/HomeFeature.tsx
View File

@ -6,14 +6,17 @@ import HomeFeatureItem from '../HomeFeatureItem/HomeFeatureItem'
const HomeFeature = () => {
return (
<section className={s.homeFeature}>
<HomeFeatureItem image="firstImg"
children={<span> Webshop owner will <b>upload products at 10:30pm </b>shoppers can buy <b>fresh products at 11pm.</b></span>} />
<HomeFeatureItem image="firstImg">
<span> Webshop owner will <b>upload products at 10:30pm </b>shoppers can buy <b>fresh products at 11pm.</b></span>
</HomeFeatureItem>
<HomeFeatureItem image="secondImg"
children={<span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>} />
<HomeFeatureItem image="secondImg">
<span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>
</HomeFeatureItem>
<HomeFeatureItem image="thirdImg"
children={<span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>} />
<HomeFeatureItem image="thirdImg">
<span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>
</HomeFeatureItem>
</section>
)

10
src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.module.scss
View File

@ -36,17 +36,15 @@
.itemText {
display: flex;
font-size: 1.6rem;
line-height: 2.4rem;
width: 28rem;
height: 9.6rem;
max-width: 28rem;
min-width: 28rem;
color: #000;
margin-right: 2.4rem;
align-items: center;
@screen md {
display: flex;
width: 28rem;
height: 9.6rem;
max-width: 28rem;
min-width: 28rem;
color: #000;
margin-right: 2.4rem;
align-items: center;

6
src/components/modules/home/HomeFeature/components/HomeFeatureItem/HomeFeatureItem.tsx
View File

@ -13,8 +13,10 @@ const HomeFeatureItem = ({ image, children }: HomeFeatureItemProps) => {
return (
<div className={s.homeFeatureItem}>
<img className={classNames(s.itemImg, {
[s[image]]: image,
})} alt="home feature item img" />
[s[image]]: image,
})}
alt="home feature item img"
/>
<div className={s.itemText}>{children}</div>
</div>
)