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

styles: BlogsList change flex -> grid

Browse Source
This commit is contained in:
unknown 2021-09-08 19:07:27 +07:00
parent 24a706e972
commit a58d30d528
7 changed files with 43 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
pages/blogs.tsx
View File

@ -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

1
src/components/common/CardBlog/CardBlog.module.scss
View File

@ -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;

2
src/components/modules/blogs/BlogBreadcrumb/BlogBreadCrumb.module.scss
View File

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

2
src/components/modules/blogs/BlogHeading/BlogHeading.module.scss
View File

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

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

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

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

@ -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>

20
src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss
View File

@ -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
}