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

feat: BlogHeading

Browse Source
This commit is contained in:
unknown
2021-09-05 10:33:16 +07:00
parent c354a360eb
commit c966fcd9c6
9 changed files with 179 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/modules/blogs/BlogsList/BlogsList.module.scss
View File

@@ -2,6 +2,7 @@
.wrapper{
@apply flex flex-col spacing-horizontal items-center;
padding-bottom: 16.8rem;
.list{
@apply flex flex-wrap justify-between;
max-width: 121.6rem;

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

@@ -1,13 +1,132 @@
import React, { useState } from 'react'
import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
import { ROUTE } from 'src/utils/constanst.utils'
import s from "./BlogsList.module.scss"
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 {
data: BlogCardProps[],
data?: BlogCardProps[],
}
const BlogsList = ({ data }:BlogsListProps) => {
const BLOGSLIST_DATA = [
{
imageSrc: image15.src,
title: "1",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image16.src,
title: "2",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image17.src,
title: "3",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image21.src,
title: "4",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image22.src,
title: "5",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image23.src,
title: "6",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image15.src,
title: "7",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image16.src,
title: "8",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image17.src,
title: "9",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image23.src,
title: "10",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image21.src,
title: "11",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image22.src,
title: "12",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image15.src,
title: "13",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image16.src,
title: "14",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image17.src,
title: "15",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image21.src,
title: "16",
description: "The DEBM diet stands for "+"Delicious Happy Fun Diet"+". This diet was popularized by Robert...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image23.src,
title: "17",
description: "Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...",
link: `${ROUTE.BLOG_DETAIL}`,
},
{
imageSrc: image22.src,
title: "18",
description: "Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...",
link: `${ROUTE.BLOG_DETAIL}`,
},
]
const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
const [currentPage, setCurrentPage] = useState(0)
const onPageChange = (page:number) => {
setCurrentPage(page)