feat: BlogsList

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'