From a339403fc7bbc5cb7cd59748a234811c38c0b2c7 Mon Sep 17 00:00:00 2001
From: unknown <shioryuu0302@gmail.com>
Date: Thu, 9 Sep 2021 19:04:01 +0700
Subject: [PATCH] styles: change layout responsive

---
 .../modules/blogs/BlogsList/BlogsList.module.scss      | 10 ++++++++--
 src/components/modules/blogs/BlogsList/BlogsList.tsx   |  6 +++---
 src/utils/constanst.utils.ts                           |  3 ++-
 3 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/components/modules/blogs/BlogsList/BlogsList.module.scss b/src/components/modules/blogs/BlogsList/BlogsList.module.scss
index 856b1e4fe..295cabc5a 100644
--- a/src/components/modules/blogs/BlogsList/BlogsList.module.scss
+++ b/src/components/modules/blogs/BlogsList/BlogsList.module.scss
@@ -4,11 +4,17 @@
     @apply flex flex-col spacing-horizontal items-center;
     padding-bottom: 16.8rem;
     .list {
-        @apply grid grid-cols-3;
+        @apply grid grid-cols-1 gap-8;
         max-width: 121.6rem;
+        @screen md {
+            @apply grid-cols-2;
+        }
+        @screen lg {
+            @apply grid-cols-3;
+        }
     }
     .card {
-        @apply pr-8 pb-16;
+        @apply pb-16;
     }
     .pagination {
         @apply flex justify-center items-center ;
diff --git a/src/components/modules/blogs/BlogsList/BlogsList.tsx b/src/components/modules/blogs/BlogsList/BlogsList.tsx
index 0c579ff53..536aa4afd 100644
--- a/src/components/modules/blogs/BlogsList/BlogsList.tsx
+++ b/src/components/modules/blogs/BlogsList/BlogsList.tsx
@@ -2,6 +2,7 @@ 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"
+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'
@@ -126,7 +127,6 @@ const BLOGSLIST_DATA = [
   ]
 
 const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
-    const defaultBlogPageSize: number = 6;
     const [currentPage, setCurrentPage] = useState(0)
     const onPageChange = (page:number) => {
         setCurrentPage(page)
@@ -137,7 +137,7 @@ const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
             <div className={s.wrapper}>
                 <div className={s.list}>
                     {
-                        data.slice(currentPage*defaultBlogPageSize,(currentPage+1)*defaultBlogPageSize).map((product,index)=> {
+                        data.slice(currentPage*DEFAULT_BLOG_PAGE_SIZE,(currentPage+1)*DEFAULT_BLOG_PAGE_SIZE).map((product,index)=> {
                             return(
                                 <div className={s.card} key={`${product.title}-${index}`}>
                                     <CardBlog {...product} />
@@ -147,7 +147,7 @@ const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
                     }
                 </div>
                 <div className={s.pagination}>
-                    <PaginationCommon total={data.length} pageSize={defaultBlogPageSize} onChange={onPageChange}/>
+                    <PaginationCommon total={data.length} pageSize={DEFAULT_BLOG_PAGE_SIZE} onChange={onPageChange}/>
                 </div>
             </div>
         </section>
diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts
index 1522e477f..8164899dd 100644
--- a/src/utils/constanst.utils.ts
+++ b/src/utils/constanst.utils.ts
@@ -50,4 +50,5 @@ export const KEY = {
 }
 
 export const OPTION_ALL = 'all';
-export const DEFAULT_PAGE_SIZE=20
\ No newline at end of file
+export const DEFAULT_PAGE_SIZE=20;
+export const DEFAULT_BLOG_PAGE_SIZE=6;
\ No newline at end of file