crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-22 04:14:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

styles: change layout responsive

Browse Source
This commit is contained in:
unknown 2021-09-09 19:04:01 +07:00
parent e8f50beb14
commit a339403fc7
3 changed files with 13 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,11 +4,17 @@
@apply flex flex-col spacing-horizontal items-center; @apply flex flex-col spacing-horizontal items-center;
padding-bottom: 16.8rem; padding-bottom: 16.8rem;
.list { .list {
@apply grid grid-cols-3; @apply grid grid-cols-1 gap-8;
max-width: 121.6rem; max-width: 121.6rem;
@screen md {
@apply grid-cols-2;
}
@screen lg {
@apply grid-cols-3;
}
} }
.card { .card {
@apply pr-8 pb-16; @apply pb-16;
} }
.pagination { .pagination {
@apply flex justify-center items-center ; @apply flex justify-center items-center ;

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

@ -2,6 +2,7 @@ import React, { useState } from 'react'
import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog' import CardBlog, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog'
import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon' import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon'
import s from "./BlogsList.module.scss" 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 image15 from '../../../../../public/assets/images/image15.png'
import image16 from '../../../../../public/assets/images/image16.png' import image16 from '../../../../../public/assets/images/image16.png'
import image17 from '../../../../../public/assets/images/image17.png' import image17 from '../../../../../public/assets/images/image17.png'
@ -126,7 +127,6 @@ const BLOGSLIST_DATA = [
] ]
const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => { const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
const defaultBlogPageSize: number = 6;
const [currentPage, setCurrentPage] = useState(0) const [currentPage, setCurrentPage] = useState(0)
const onPageChange = (page:number) => { const onPageChange = (page:number) => {
setCurrentPage(page) setCurrentPage(page)
@ -137,7 +137,7 @@ const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
<div className={s.wrapper}> <div className={s.wrapper}>
<div className={s.list}> <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( return(
<div className={s.card} key={`${product.title}-${index}`}> <div className={s.card} key={`${product.title}-${index}`}>
<CardBlog {...product} /> <CardBlog {...product} />
@ -147,7 +147,7 @@ const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => {
} }
</div> </div>
<div className={s.pagination}> <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>
</div> </div>
</section> </section>

3
src/utils/constanst.utils.ts
View File

@ -50,4 +50,5 @@ export const KEY = {
} }
export const OPTION_ALL = 'all'; export const OPTION_ALL = 'all';
export const DEFAULT_PAGE_SIZE=20 export const DEFAULT_PAGE_SIZE=20;
export const DEFAULT_BLOG_PAGE_SIZE=6;