From c966fcd9c6e3fcd9fc8bb4c5954a8f32329b6c7b Mon Sep 17 00:00:00 2001 From: unknown Date: Sun, 5 Sep 2021 10:33:16 +0700 Subject: [PATCH] feat: BlogHeading --- pages/index.tsx | 135 +----------------- .../blogs/BlogHeading/BlogHeading.module.scss | 9 ++ .../modules/blogs/BlogHeading/BlogHeading.tsx | 18 +++ .../blogs/BlogsList/BlogsList.module.scss | 1 + .../modules/blogs/BlogsList/BlogsList.tsx | 123 +++++++++++++++- .../FeaturedCardBlog.module.scss | 2 +- .../FeaturedCardBlog/FeaturedCardBlog.tsx | 29 +++- src/components/modules/blogs/index.tsx | 3 +- .../DeliveryAndPolicyContent.tsx | 1 - 9 files changed, 179 insertions(+), 142 deletions(-) create mode 100644 src/components/modules/blogs/BlogHeading/BlogHeading.module.scss create mode 100644 src/components/modules/blogs/BlogHeading/BlogHeading.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 05c683fac..79db66f8f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,141 +4,14 @@ import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeR import {SelectCommon} from 'src/components/common' import { QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' import card from "../public/assets/images/card.png" -import image15 from '../public/assets/images/image15.png' -import image16 from '../public/assets/images/image16.png' -import image17 from '../public/assets/images/image17.png' -import image20 from '../public/assets/images/image20.png' -import image21 from '../public/assets/images/image21.png' -import image22 from '../public/assets/images/image22.png' -import image23 from '../public/assets/images/image23.png' -import author from '../public/assets/images/author.png' -import { BlogsList, FeaturedCardBlog } from 'src/components/modules/blogs'; +import { BlogsList, FeaturedCardBlog, BlogHeading } from 'src/components/modules/blogs'; -const data = { - title: "Flammekueche with green asparagus", - content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉", - imgSrc: image20, - imgAuthor: author, - date: "APRIL 30, 2021", - author: "Alessandro Del Piero" -} -const DATA_TEST = [ - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - { - 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}`, - }, - -] export default function Home() { return ( <> - - - + + + ) } diff --git a/src/components/modules/blogs/BlogHeading/BlogHeading.module.scss b/src/components/modules/blogs/BlogHeading/BlogHeading.module.scss new file mode 100644 index 000000000..00fdb7ed4 --- /dev/null +++ b/src/components/modules/blogs/BlogHeading/BlogHeading.module.scss @@ -0,0 +1,9 @@ +@import "../../../../styles/utilities"; + +.headingWrapper{ + @apply flex spacing-horizontal-left pb-16 justify-center; + .heading{ + max-width: 121.6rem; + flex-grow: 1; + } +} \ No newline at end of file diff --git a/src/components/modules/blogs/BlogHeading/BlogHeading.tsx b/src/components/modules/blogs/BlogHeading/BlogHeading.tsx new file mode 100644 index 000000000..e3f60c980 --- /dev/null +++ b/src/components/modules/blogs/BlogHeading/BlogHeading.tsx @@ -0,0 +1,18 @@ +import { HeadingCommon } from "src/components/common" +import s from './BlogHeading.module.scss' + +interface BlogHeadingProps { + children?: React.ReactNode, + heading?: string, +} + +const BlogHeading = ({heading = "BLOG"}: BlogHeadingProps) => { + return ( +
+
+ {heading} +
+
+ ) +} +export default BlogHeading \ No newline at end of file diff --git a/src/components/modules/blogs/BlogsList/BlogsList.module.scss b/src/components/modules/blogs/BlogsList/BlogsList.module.scss index d7b0e99b2..30ddc17d4 100644 --- a/src/components/modules/blogs/BlogsList/BlogsList.module.scss +++ b/src/components/modules/blogs/BlogsList/BlogsList.module.scss @@ -2,6 +2,7 @@ .wrapper{ @apply flex flex-col spacing-horizontal items-center; + padding-bottom: 16.8rem; .list{ @apply flex flex-wrap justify-between; max-width: 121.6rem; diff --git a/src/components/modules/blogs/BlogsList/BlogsList.tsx b/src/components/modules/blogs/BlogsList/BlogsList.tsx index fbceb53d1..360854ea0 100644 --- a/src/components/modules/blogs/BlogsList/BlogsList.tsx +++ b/src/components/modules/blogs/BlogsList/BlogsList.tsx @@ -1,13 +1,132 @@ 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' +import image17 from '../../../../../public/assets/images/image17.png' +import image21 from '../../../../../public/assets/images/image21.png' +import image22 from '../../../../../public/assets/images/image22.png' +import image23 from '../../../../../public/assets/images/image23.png' interface BlogsListProps { - data: BlogCardProps[], + data?: BlogCardProps[], } -const BlogsList = ({ data }:BlogsListProps) => { +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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + { + 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}`, + }, + + ] + +const BlogsList = ({ data = BLOGSLIST_DATA }:BlogsListProps) => { const [currentPage, setCurrentPage] = useState(0) const onPageChange = (page:number) => { setCurrentPage(page) diff --git a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss index 413850431..eed82a920 100644 --- a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss +++ b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.module.scss @@ -1,7 +1,7 @@ @import "../../../../styles/utilities"; .featuredCard{ - @apply flex flex-row justify-center spacing-horizontal; + @apply flex flex-row justify-center spacing-horizontal pb-16; .featuredCardWrapper{ @apply flex flex-row justify-between; max-width: 121.6rem; diff --git a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx index f12f49648..f619a51f1 100644 --- a/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx +++ b/src/components/modules/blogs/FeaturedCardBlog/FeaturedCardBlog.tsx @@ -1,18 +1,35 @@ - import s from './FeaturedCardBlog.module.scss' import { Author, DateTime } from 'src/components/common' import Image from "next/image"; +import image20 from '../../../../../public/assets/images/image20.png' +import author from '../../../../../public/assets/images/author.png' interface FeaturedCardBlogProps{ title?: string, content?: string, - imgSrc: any, - imgAuthor: any, - date: string, - authorName: string, + imgSrc?: any, + imgAuthor?: any, + date?: string, + authorName?: string, } -const FeaturedCardBlog = ({ title, content, imgSrc, imgAuthor, date, authorName }: FeaturedCardBlogProps) => { +const FEATURED_DATA = { + title: "Flammekueche with green asparagus", + content: "Traditionally, the Flammekueche is made with rapeseed oil, which, contrary to popular belief, is indeed an oil that can be cooked hot and is not limited to seasoning. It is important to vary the oils in the kitchen to take advantage of the benefits of each. Rapeseed oil is an oil rich in omega 3 which participate in the proper functioning of the cardiovascular system as well as in vitamins E which contributes to the protection of cells against oxidative stress. In short, oils are your friends 😉", + imgSrc: image20, + imgAuthor: author, + date: "APRIL 30, 2021", + author: "Alessandro Del Piero" +} + +const FeaturedCardBlog = ({ + title = FEATURED_DATA.title, + content = FEATURED_DATA.content, + imgSrc = FEATURED_DATA.imgSrc, + imgAuthor = FEATURED_DATA.imgAuthor, + date = FEATURED_DATA.date, + authorName = FEATURED_DATA.author +}: FeaturedCardBlogProps) => { return (
diff --git a/src/components/modules/blogs/index.tsx b/src/components/modules/blogs/index.tsx index 606fe9156..36e0e5d15 100644 --- a/src/components/modules/blogs/index.tsx +++ b/src/components/modules/blogs/index.tsx @@ -1,2 +1,3 @@ export { default as FeaturedCardBlog } from './FeaturedCardBlog/FeaturedCardBlog' -export { default as BlogsList } from './BlogsList/BlogsList' \ No newline at end of file +export { default as BlogsList } from './BlogsList/BlogsList' +export { default as BlogHeading } from './BlogHeading/BlogHeading' \ No newline at end of file diff --git a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx index 7403a813a..317dab328 100644 --- a/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx +++ b/src/components/modules/delivery-policy/DeliveryAndPolicyContent/DeliveryAndPolicyContent.tsx @@ -10,7 +10,6 @@ interface DeliveryAndPolicyContentProps{ const DeliveryAndPolicyContent = ( { title, date, content } : DeliveryAndPolicyContentProps) => { return (
-
LASTEST UPDATED: