styles: BlogsList change flex -> grid

pages/blogs.tsx

@@ -1,6 +1,7 @@
+import { Layout } from 'src/components/common';
 import { BlogsList, FeaturedCardBlog, BlogHeading, BlogBreadCrumb } from 'src/components/modules/blogs';
 
-const BlogsPage = () => {
+export default function BlogsPage() {
     return(
         <>
             <BlogBreadCrumb />
@@ -10,4 +11,4 @@ const BlogsPage = () => {
         </>
     )
 }
-export default BlogsPage
+BlogsPage.Layout = Layout

src/components/common/CardBlog/CardBlog.module.scss

@@ -3,7 +3,6 @@
 .cardBlogWarpper {
     @apply inline-flex flex-col justify-start;
     max-width: 39.2rem;
-    min-height: 34.4rem;
     .image {
         width: 100%;
         max-height: 22rem;

src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss

@@ -1,4 +1,4 @@
-.breadCrumbWrapper{
+.breadCrumbWrapper {
     @apply py-12;
     padding-left: 3.2rem;
 }

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

@@ -1,6 +1,6 @@
 @import "../../../../styles/utilities";
 
-.headingWrapper{
+.headingWrapper {
     @apply flex spacing-horizontal-left pb-16 justify-center;
     .heading{
         max-width: 121.6rem;

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

@@ -1,17 +1,17 @@
 @import "../../../../styles/utilities";
 
-.wrapper{
+.wrapper {
     @apply flex flex-col spacing-horizontal items-center;
     padding-bottom: 16.8rem;
-    .list{
+    .list {
-        @apply flex flex-wrap justify-between;
+        @apply grid grid-cols-3;
         max-width: 121.6rem;
     }
-    .card{
+    .card {
-        padding-bottom: 4rem;
+        @apply pr-8 pb-16;
     }
-    .pagination{
+    .pagination {
-        padding-top: 0.8rem;
         @apply flex justify-center items-center ;
+        padding-top: 0.8rem;
     }
 }

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

@@ -1,7 +1,6 @@
 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'
@@ -19,114 +18,115 @@ 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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
     {
       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}`,
+      slug: "happy-diet"
     },
   
   ]
 
 const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
+    const defaultBlogPageSize: number = 6;
     const [currentPage, setCurrentPage] = useState(0)
     const onPageChange = (page:number) => {
         setCurrentPage(page)
@@ -136,7 +136,7 @@ const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
             <div className={s.wrapper}>
                 <div className={s.list}>
                     {
-                        data.slice(currentPage*6,(currentPage+1)*6).map((product,index)=>{
+                        data.slice(currentPage*defaultBlogPageSize,(currentPage+1)*defaultBlogPageSize).map((product,index)=>{
                             return(
                                 <div className={s.card}>
                                     <CardBlog {...product} key={index}/>
@@ -146,7 +146,7 @@ const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
                     }
                 </div>
                 <div className={s.pagination}>
-                    <PaginationCommon total={data.length} pageSize={6} onChange={onPageChange}/>
+                    <PaginationCommon total={data.length} pageSize={defaultBlogPageSize} onChange={onPageChange}/>
                 </div>
             </div>
         </section>

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

@@ -1,37 +1,37 @@
 @import "../../../../styles/utilities";
 
-.featuredCard{
+.featuredCard {
     @apply flex flex-row justify-center spacing-horizontal pb-16;
-    .featuredCardWrapper{
+    .featuredCardWrapper {
         @apply flex flex-col;
-        @screen lg{
+        @screen lg {
             @apply flex-row justify-between;
         }
         max-width: 121.6rem;
     }
 }
-.left{
+.left {
     max-width: 59.8rem;
-    img{
+    img {
         border-radius: 2.4rem;
     }
 }
-.right{
+.right {
     flex-shrink: 3;
     max-width: 55.4rem;
-    @screen lg{
+    @screen lg {
         margin-left: 6.4rem;
     }
 }
-.titleWrapper{
+.titleWrapper {
     @apply flex flex-col items-start font-heading;
     font-size: 3.2rem;
     line-height: 4rem;
     margin-bottom: 1.6rem;
-    .title{
+    .title {
         margin-top: 0.4rem;
     }
 }
-.content{
+.content {
     margin-top: 1.6rem
 }