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

refactor: change image

Browse Source
This commit is contained in:
unknown
2021-09-14 11:48:24 +07:00
parent d99abb51e9
commit 3e001bbf18
6 changed files with 42 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/common/CardBlog/CardBlog.module.scss
View File

@@ -4,8 +4,6 @@
@apply inline-flex flex-col justify-start; @apply inline-flex flex-col justify-start;
max-width: 39.2rem; max-width: 39.2rem;
.image { .image {
width: 100%;
max-height: 22rem;
border-radius: 2.4rem; border-radius: 2.4rem;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
@@ -13,6 +11,9 @@
img{ img{
border-radius: 2.4rem; border-radius: 2.4rem;
} }
> div{
min-height: 22rem;
}
} }
.title { .title {
padding: 1.6rem 0.8rem 0.4rem 0.8rem; padding: 1.6rem 0.8rem 0.4rem 0.8rem;

4
src/components/common/CardBlog/CardBlog.tsx
View File

@@ -2,7 +2,9 @@ import Link from 'next/link'
import React from 'react' import React from 'react'
import { ROUTE } from 'src/utils/constanst.utils' import { ROUTE } from 'src/utils/constanst.utils'
import { BlogProps } from 'src/utils/types.utils' import { BlogProps } from 'src/utils/types.utils'
import { ImgWithLink } from '..'
import s from './CardBlog.module.scss' import s from './CardBlog.module.scss'
export interface BlogCardProps extends BlogProps { export interface BlogCardProps extends BlogProps {
// todo: edit when intergrate API // todo: edit when intergrate API
@@ -14,7 +16,7 @@ const CardBlog = ({ imageSrc, title, description, slug }: BlogCardProps) => {
<Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}> <Link href={`${ROUTE.BLOG_DETAIL}/${slug}`}>
<a> <a>
<div className={s.image}> <div className={s.image}>
<img src={imageSrc} alt="image cardblog" /> <ImgWithLink src={imageSrc} alt="image cardblog" />
</div> </div>
</a> </a>
</Link> </Link>

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

@@ -1,6 +1,3 @@
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 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'
@@ -22,32 +19,32 @@ const recipe:BlogCardProps[] = [
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners", title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
slug: 'have-a-nice-lunch', slug: 'have-a-nice-lunch',
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...", description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
imageSrc: image15.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
},{ },{
title: "9 Ways to Make an Aloe Vera Mask at Home", title: "9 Ways to Make an Aloe Vera Mask at Home",
slug: 'have-a-nice-lunch', slug: 'have-a-nice-lunch',
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
imageSrc: image16.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
},{ },{
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
slug: 'have-a-nice-lunch', slug: 'have-a-nice-lunch',
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
imageSrc: image17.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
},{ },{
title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners", title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners",
slug: 'have-a-nice-lunch', slug: 'have-a-nice-lunch',
description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...", description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...",
imageSrc: image15.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
},{ },{
title: "9 Ways to Make an Aloe Vera Mask at Home", title: "9 Ways to Make an Aloe Vera Mask at Home",
slug: 'have-a-nice-lunch', slug: 'have-a-nice-lunch',
description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
imageSrc: image16.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
},{ },{
title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit",
slug: 'have-a-nice-lunch', slug: 'have-a-nice-lunch',
description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
imageSrc: image17.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
}] }]
const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => { const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts", bgcolor = "default" }: RelevantProps) => {

42
src/components/modules/blogs/BlogsList/BlogsList.tsx
View File

@@ -3,12 +3,6 @@ import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon' import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
import s from "./BlogsList.module.scss" import s from "./BlogsList.module.scss"
import { DEFAULT_BLOG_PAGE_SIZE } from 'src/utils/constanst.utils' import { DEFAULT_BLOG_PAGE_SIZE } from 'src/utils/constanst.utils'
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 image21 from '../../../../../public/assets/images/image21.png'
import image22 from '../../../../../public/assets/images/image22.png'
import image23 from '../../../../../public/assets/images/image23.png'
interface BlogsListProps { interface BlogsListProps {
data?: BlogCardProps[], data?: BlogCardProps[],
@@ -16,109 +10,109 @@ interface BlogsListProps {
const BLOGSLIST_DATA = [ const BLOGSLIST_DATA = [
{ {
imageSrc: image15.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
title: "1", title: "1",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...", description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image16.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
title: "2", title: "2",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image17.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
title: "3", title: "3",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image21.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
title: "4", title: "4",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...", description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image22.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
title: "5", title: "5",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image23.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
title: "6", title: "6",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image15.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
title: "7", title: "7",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...", description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image16.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
title: "8", title: "8",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image17.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
title: "9", title: "9",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image23.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
title: "10", title: "10",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image21.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
title: "11", title: "11",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...", description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image22.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
title: "12", title: "12",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image15.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185783-8100ef4e-7a72-4dc1-bb12-2ca46b56b393.png",
title: "13", title: "13",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...", description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image16.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185911-df505d10-fdcd-4312-add3-7c62ad8af71e.png",
title: "14", title: "14",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image17.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133185959-7ad75580-ca6d-4684-83d9-3f64500bbc97.png",
title: "15", title: "15",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image21.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133186410-d8718d90-82fb-46cb-a0f2-0ec96356ae89.png",
title: "16", title: "16",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...", description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image23.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133186545-d860f4ee-222c-4d72-a876-808af0f397a0.png",
title: "17", title: "17",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
slug: "happy-diet" slug: "happy-diet"
}, },
{ {
imageSrc: image22.src, imageSrc: "https://user-images.githubusercontent.com/46085455/133186474-b2d89bbc-32ed-4174-a05e-3d388c0a39ff.png",
title: "18", title: "18",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
slug: "happy-diet" slug: "happy-diet"

10
src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
View File

@@ -11,13 +11,15 @@
} }
} }
.left { .left {
max-width: 59.8rem; > div{
img { min-width: 59.8rem;
border-radius: 2.4rem; min-height: 33.6rem;
img {
border-radius: 2.4rem;
}
} }
} }
.right { .right {
flex-shrink: 3;
@screen lg { @screen lg {
margin-left: 6.4rem; margin-left: 6.4rem;
} }

15
src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx
View File

@@ -1,14 +1,11 @@
import s from './FeaturedCardBlog.module.scss' import s from './FeaturedCardBlog.module.scss'
import { Author, DateTime } from 'src/components/common' import { Author, DateTime, ImgWithLink } from 'src/components/common'
import Image from "next/image";
import image20 from '../../../../../public/assets/images/image20.png'
import author from '../../../../../public/assets/images/author.png'
interface FeaturedCardBlogProps{ interface FeaturedCardBlogProps{
title?: string, title?: string,
content?: string, content?: string,
imgSrc?: any, imgSrc?: string,
imgAuthor?: any, imgAuthor?: string,
date?: string, date?: string,
authorName?: string, authorName?: string,
} }
@@ -16,8 +13,8 @@ interface FeaturedCardBlogProps{
const FEATURED_DATA = { const FEATURED_DATA = {
title: "Flammekueche with green asparagus", title: "Flammekueche with green asparagus",
content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉", content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉",
imgSrc: image20, imgSrc: "https://user-images.githubusercontent.com/46085455/133186666-1ea8081f-4319-4617-8644-d20ed14b1825.png",
imgAuthor: author.src, imgAuthor: "https://user-images.githubusercontent.com/46085455/133186783-d0c71d43-b7bc-44b6-b560-818c71bd162f.png",
date: "APRIL 30, 2021", date: "APRIL 30, 2021",
author: "Alessandro Del Piero" author: "Alessandro Del Piero"
} }
@@ -34,7 +31,7 @@ const FeaturedCardBlog = ({
<section className={s.featuredCard}> <section className={s.featuredCard}>
<div className={s.featuredCardWrapper}> <div className={s.featuredCardWrapper}>
<div className={s.left}> <div className={s.left}>
<Image src={imgSrc} alt="image feature card"/> <ImgWithLink src={imgSrc} alt="image feature card"/>
</div> </div>
<div className={s.right}> <div className={s.right}>
<div className={s.titleWrapper}> <div className={s.titleWrapper}>