crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-10 06:41:20 +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 = () => { const HomeFeature = () => {
return ( return (
<section className={s.homeFeature}> <section className={s.homeFeature}>
<HomeFeatureItem image="firstImg" <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>} /> <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" <HomeFeatureItem image="secondImg">
children={<span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>} /> <span>Most fresh fish and seafood <b>will be listed at 8am </b>from inventory.</span>
</HomeFeatureItem>
<HomeFeatureItem image="thirdImg" <HomeFeatureItem image="thirdImg">
children={<span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>} /> <span>Show that food will be shipped in <b>a greengrocery plastic bag</b>.</span>
</HomeFeatureItem>
</section> </section>
) )

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

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

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

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