feat: BlogsList

pages/index.tsx

@@ -2,10 +2,17 @@
 import { Author, CardBlog, CollapseCommon, Layout, RelevantBlogPosts } from 'src/components/common';
 import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
 import {SelectCommon} from 'src/components/common'
+import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
 import card from "../public/assets/images/card.png"
+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 image20 from '../public/assets/images/image20.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'
 import author from '../public/assets/images/author.png'
-import { FeaturedCardBlog } from 'src/components/modules/blogs';
+import { BlogsList, FeaturedCardBlog } from 'src/components/modules/blogs';
 
 const data = {
   title: "Flammekueche with green asparagus",
@@ -15,12 +22,125 @@ const data = {
   date: "APRIL 30, 2021",
   author: "Alessandro Del Piero"
 }
+const DATA_TEST = [
+  {
+    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}`,
+  },
+
+]
 export default function Home() {
   return (
     <>
       <FeaturedCardBlog title={data.title} content={data.content} imgSrc={data.imgSrc} imgAuthor={data.imgAuthor} date={data.date} authorName={data.author} />
+    
+      <BlogsList data={DATA_TEST} />
     </>
   )
 }
 
-// Home.Layout = Layout
+Home.Layout = Layout

src/components/common/Layout/Layout.tsx

@@ -17,9 +17,9 @@ const Layout: FC<Props> = ({ children }) => {
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
-                {/* <Header /> */}
+                <Header />
                 <main >{children}</main>
-                {/* <Footer /> */}
+                <Footer />
             </div>
         </CommerceProvider>
 

src/components/modules/blogs/BlogsList/BlogsList.module.scss

@@ -0,0 +1,15 @@
+@import "../../../../styles/utilities";
+
+.wrapper{
+    @apply flex flex-col spacing-horizontal;
+    .list{
+        @apply flex flex-wrap flex justify-around;
+    }
+    .card{
+        padding-bottom: 4rem;
+    }
+    .pagination{
+        padding-top: 0.8rem;
+        @apply flex justify-center items-center ;
+    }
+}

src/components/modules/blogs/BlogsList/BlogsList.tsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
+import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
+import s from "./BlogsList.module.scss"
+
+interface BlogsListProps {
+    data: BlogCardProps[],
+}
+
+const BlogsList = ({ data }:BlogsListProps) => {
+    const [currentPage, setCurrentPage] = useState(0)
+    const onPageChange = (page:number) => {
+        setCurrentPage(page)
+    }
+    return (
+        <section>
+            <div className={s.wrapper}>
+                <div className={s.list}>
+                    {
+                        data.slice(currentPage*6,(currentPage+1)*6).map((product,index)=>{
+                            return(
+                                <div className={s.card}>
+                                    <CardBlog {...product} key={index}/>
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+                <div className={s.pagination}>
+                    <PaginationCommon total={data.length} pageSize={6} onChange={onPageChange}/>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default BlogsList

src/components/modules/blogs/index.tsx

@@ -1 +1,2 @@
-export { default as FeaturedCardBlog } from './FeaturedCardBlog/FeaturedCardBlog'
+export { default as FeaturedCardBlog } from './FeaturedCardBlog/FeaturedCardBlog'
+export { default as BlogsList } from './BlogsList/BlogsList'