diff --git a/pages/index.tsx b/pages/index.tsx index 7d23ebadd..f2f67dc4a 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,10 +1,14 @@ import { Layout } from 'src/components/common'; import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home'; +import {SelectCommon} from 'src/components/common' +import card from "../public/assets/images/card.png" + export default function Home() { return ( <> + @@ -12,8 +16,7 @@ export default function Home() { - - {/* // todo: uncomment */} + {/* todo: uncomment */} {/* */} ) diff --git a/public/assets/images/image15.png b/public/assets/images/image15.png new file mode 100644 index 000000000..a4d0badbd Binary files /dev/null and b/public/assets/images/image15.png differ diff --git a/public/assets/images/image16.png b/public/assets/images/image16.png new file mode 100644 index 000000000..c5457090e Binary files /dev/null and b/public/assets/images/image16.png differ diff --git a/public/assets/images/image17.png b/public/assets/images/image17.png new file mode 100644 index 000000000..2dcb53d27 Binary files /dev/null and b/public/assets/images/image17.png differ diff --git a/src/components/common/CardBlog/CardBlog.module.scss b/src/components/common/CardBlog/CardBlog.module.scss new file mode 100644 index 000000000..f0dc00b3a --- /dev/null +++ b/src/components/common/CardBlog/CardBlog.module.scss @@ -0,0 +1,34 @@ +@import "../../../styles/utilities"; + +.cardBlogWarpper { + @apply inline-flex flex-col justify-start; + max-width: 39.2rem; + min-height: 34.4rem; + .image { + width: 100%; + max-height: 22rem; + border-radius: 2.4rem; + &:hover { + cursor: pointer; + } + } + .title { + padding: 1.6rem 0.8rem 0.4rem 0.8rem; + @apply font-bold; + font-size: 2rem; + line-height: 2.8rem; + letter-spacing: -0.01em; + color: var(--text-active); + &:hover { + cursor: pointer; + } + } + .description { + padding: 0 0.8rem; + @apply overflow-hidden overflow-ellipsis ; + color: var(--text-label); + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + } +} \ No newline at end of file diff --git a/src/components/common/CardBlog/CardBlog.tsx b/src/components/common/CardBlog/CardBlog.tsx new file mode 100644 index 000000000..17a796bc4 --- /dev/null +++ b/src/components/common/CardBlog/CardBlog.tsx @@ -0,0 +1,25 @@ +import Link from 'next/link' +import React from 'react' +import { RecipeProps } from 'src/utils/types.utils' +import s from './CardBlog.module.scss' +export interface BlogCardProps extends RecipeProps { + link: string, +} + +const CardBlog = ({ imageSrc, title, description, link }: BlogCardProps) => { + return ( +
+ +
+ image cardblog +
+ + +
{title}
+ +
{description}
+
+ ) +} + +export default CardBlog diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx index 136c323f3..3b5854ed4 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.tsx +++ b/src/components/common/CarouselCommon/CarouselCommon.tsx @@ -28,7 +28,6 @@ const CarouselCommon = ({ option: { slideChanged,slidesPerView, ...sliderOption }, }: CarouselCommonProps) => { const [currentSlide, setCurrentSlide] = React.useState(0) - // const [dotActive, setDotActive] = React.useState(0) const [dotArr, setDotArr] = React.useState([]) const [sliderRef, slider] = useKeenSlider({ ...sliderOption, diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss new file mode 100644 index 000000000..e6a71e44e --- /dev/null +++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.module.scss @@ -0,0 +1,66 @@ +@import "../../../../styles/utilities"; + +.collapseWrapper { + @apply border-t border-b; + border-color: var(--border-line); + max-width: 80.4rem; + min-height: 4rem; + &.isActive { + .title { + @apply pb-0; + } + .contentContainer { + @apply block; + animation: ContentAnimationIn 0.5s ease-out; + } + .toggle { + &:before { + transform: rotate(180deg); + } + &:after { + transform: rotate(180deg); + } + } + } + &:hover { + cursor: pointer; + } +} +.title { + @apply outline-none flex justify-between font-heading items-center pt-16 pb-16; + font-size: 3.2rem; + line-height: 4rem; + letter-spacing: -0.01em; + .toggle { + height: 2.2rem; + width: 2.2rem; + position: relative; + &:before, + &:after { + @apply absolute h-2; + content: ""; + border-radius: 0.8rem; + background: var(--text-active); + top: 40%; + width: 2.2rem; + transition: transform 500ms ease; + } + &:before { + transform-origin: center; + transform: rotate(90deg); + } + } +} +.contentContainer { + @apply hidden pb-16; +} +@keyframes ContentAnimationIn { + 0% { + opacity: 0; + transform: translateY(-1.6rem); + } + 100% { + opacity: 1; + transform: none; + } +} \ No newline at end of file diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx new file mode 100644 index 000000000..22cbcda10 --- /dev/null +++ b/src/components/common/CollapseCommon/CollapseChild/CollapseChild.tsx @@ -0,0 +1,41 @@ +import s from './CollapseChild.module.scss' +import { useState } from 'react' +import classNames from 'classnames' +import CollapseContent from './CollapseContent/CollapseContent' +import Link from 'next/link' + +interface CollapseProps{ + title?: string, + content: Array, + isToggle?: boolean, + link?: string, +} +const CollapseChild = ({title, content, isToggle=false, link="/"}: CollapseProps) => { + const [isActive, changeActive] = useState(isToggle) + + const handleToggle = () => { + changeActive(!isActive) + } + return( +
+
+ + {title} + +
+
+
+ { + content.map(item => ) + } +
+
+ ) +} + +export default CollapseChild \ No newline at end of file diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss new file mode 100644 index 000000000..9e5cfba30 --- /dev/null +++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss @@ -0,0 +1,3 @@ +.content { + margin-top: 1.6rem; +} \ No newline at end of file diff --git a/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx new file mode 100644 index 000000000..e18e19c0a --- /dev/null +++ b/src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.tsx @@ -0,0 +1,15 @@ +import s from './CollapseContent.module.scss' + +interface CollapseContentProps{ + content: string +} + +const CollapseContent = ({content}: CollapseContentProps) => { + return ( +
+ {content} +
+ ) +} + +export default CollapseContent \ No newline at end of file diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx new file mode 100644 index 000000000..98030ffce --- /dev/null +++ b/src/components/common/CollapseCommon/CollapseCommon.tsx @@ -0,0 +1,19 @@ +import CollapseChild from './CollapseChild/CollapseChild' + +interface CollapseCommonProps{ + data: {title: string, content: Array, link: string}[], +} + +const CollapseCommon = ({data}: CollapseCommonProps) => { + return ( +
+ { + data.map(item => + + ) + } +
+ ) +} + +export default CollapseCommon diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index 17f520185..e52e70d3e 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -29,10 +29,6 @@ const Layout: FC = ({ children }) => {
{children}
- -
diff --git a/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.module.scss b/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.module.scss new file mode 100644 index 000000000..6179a6aed --- /dev/null +++ b/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.module.scss @@ -0,0 +1,16 @@ +@import '../../../../styles/utilities'; +.blogCardWarpper { + @apply spacing-horizontal; + @screen xl { + :global(.customArrow) { + @screen lg { + &:global(.leftArrow) { + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem - 2rem); + } + } + } + } +} diff --git a/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx b/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx new file mode 100644 index 000000000..396d42d07 --- /dev/null +++ b/src/components/common/RelevantBlogPosts/BlogPostCarousel/BlogPostCarousel.tsx @@ -0,0 +1,46 @@ +import { TOptionsEvents } from 'keen-slider' +import React from 'react' +import CarouselCommon, { + CarouselCommonProps, +} from '../../CarouselCommon/CarouselCommon' +import BlogCard, { BlogCardProps } from 'src/components/common/CardBlog/CardBlog' +import s from "./BlogPostCarousel.module.scss" + +interface BlogPostCarouselProps + extends Omit, 'Component'|"option"> { + option?:TOptionsEvents + } + +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 1.25, + mode: 'free', + spacing:24, + breakpoints: { + '(min-width: 640px)': { + slidesPerView: 2, + }, + '(min-width: 1024px)': { + slidesPerView: 2.5, + }, + '(min-width: 1440px)': { + slidesPerView: 3, + }, + '(min-width: 1536px)': { + slidesPerView: 3.5, + }, + }, +} +const BlogPostCarousel = ({ option, data, ...props }: BlogPostCarouselProps) => { + return ( +
+ + data={data} + Component={BlogCard} + {...props} + option={{ ...OPTION_DEFAULT, ...option }} + /> +
+ ) +} + +export default BlogPostCarousel diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss new file mode 100644 index 000000000..d5a13299d --- /dev/null +++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.module.scss @@ -0,0 +1,16 @@ +@import '../../../styles/utilities'; + +.blogPostWarpper { + padding-top: 5.6rem; + padding-bottom: 5.2rem; + @apply flex flex-col; + .top { + @apply spacing-horizontal flex w-full justify-between; + padding-bottom: 3.2rem; + @screen xl { + .right { + margin-right: 2.476rem; + } + } + } +} diff --git a/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx new file mode 100644 index 000000000..01e19bb25 --- /dev/null +++ b/src/components/common/RelevantBlogPosts/RelevantBlogPosts.tsx @@ -0,0 +1,69 @@ +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 React from 'react' +import { HeadingCommon, ViewAllItem } from 'src/components/common' +import { BlogCardProps } from 'src/components/common/CardBlog/CardBlog' +import BlogPostCarousel from './BlogPostCarousel/BlogPostCarousel' +import s from './RelevantBlogPosts.module.scss' +import { ROUTE } from 'src/utils/constanst.utils'; + +interface RelevantProps { + data?: BlogCardProps[] + itemKey?: string + title?: string + viewAllLink?: string +} + +const recipe:BlogCardProps[] = [ +{ + title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners", + description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...", + imageSrc: image15.src, + link: `${ROUTE.BLOG_DETAIL}` +},{ + title: "9 Ways to Make an Aloe Vera Mask at Home", + description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", + imageSrc: image16.src, + link: `${ROUTE.BLOG_DETAIL}` +},{ + title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", + description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", + imageSrc: image17.src, + link: `${ROUTE.BLOG_DETAIL}` +},{ + title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners", + description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...", + imageSrc: image15.src, + link: `${ROUTE.BLOG_DETAIL}` +},{ + title: "9 Ways to Make an Aloe Vera Mask at Home", + description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", + imageSrc: image16.src, + link: `${ROUTE.BLOG_DETAIL}` +},{ + title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", + description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", + imageSrc: image17.src, + link: `${ROUTE.BLOG_DETAIL}` +}] + + const RelevantBlogPosts = ({ data = recipe, itemKey="detail-relevant", title="Relevant Blog Posts" }: RelevantProps) => { + return ( +
+
+
+ {title} +
+
+ +
+
+
+ +
+
+ ) + } + + export default RelevantBlogPosts \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 19bd0fa6b..56896f790 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -32,6 +32,9 @@ export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm" export { default as ModalInfo} from "./ModalInfo/ModalInfo" export { default as ProductList} from "./ProductList/ProductList" export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo' +export { default as CardBlog} from './CardBlog/CardBlog' +export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts' +export { default as CollapseCommon} from './CollapseCommon/CollapseCommon' export { default as ImgWithLink} from './ImgWithLink/ImgWithLink' export { default as RecipeDetail} from './RecipeDetail/RecipeDetail' export { default as DrawerCommon} from './DrawerCommon/DrawerCommon' diff --git a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx index 30796a65a..486e6ac97 100644 --- a/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx +++ b/src/components/modules/blogs/BlogDetailPage/BlogDetailPage.tsx @@ -7,7 +7,12 @@ import s from './BlogDetailPage.module.scss'; import BlogContent from '../BlogContent/BlogContent'; import { BlogDetailImg } from '..'; import BreadcrumbCommon from 'src/components/common/BreadcrumbCommon/BreadcrumbCommon'; +import RelevantBlogPosts from 'src/components/common/RelevantBlogPosts/RelevantBlogPosts'; +import { ROUTE } 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' const BLOGDETAIL= { @@ -28,6 +33,39 @@ const CRUMBS =[ } ] +const recipe = [ + { + title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners", + description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...", + imageSrc: image15.src, + link: `${ROUTE.BLOG_DETAIL}` + },{ + title: "9 Ways to Make an Aloe Vera Mask at Home", + description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", + imageSrc: image16.src, + link: `${ROUTE.BLOG_DETAIL}` + },{ + title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", + description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", + imageSrc: image17.src, + link: `${ROUTE.BLOG_DETAIL}` + },{ + title: "Want to Lose Weight? Here are 10 DEBM Diet Guidelines for Beginners", + description:"The DEBM diet stands for "+'"Delicious Happy Fun Diet"'+". This diet was popularized by Robert...", + imageSrc: image15.src, + link: `${ROUTE.BLOG_DETAIL}` + },{ + title: "9 Ways to Make an Aloe Vera Mask at Home", + description:"Aloe vera or aloe vera is a green plant, has thorns on the side of the skin with yellowish patches and...", + imageSrc: image16.src, + link: `${ROUTE.BLOG_DETAIL}` + },{ + title: "Don't Buy Wrong, Here Are 7 Ways to Choose a Ripe Dragon Fruit", + description:"Dragon fruit is a type of fruit that is a favorite for many people because of its delicious and fresh...", + imageSrc: image17.src, + link: `${ROUTE.BLOG_DETAIL}` + }]; + const BlogDetailPage = () => { return ( <> @@ -48,7 +86,9 @@ const BlogDetailPage = () => { imageAuthor={BLOGDETAIL.imageAuthor} nameAuthor={BLOGDETAIL.nameAuthor}/> - +
+ +
) diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index 0d92b4858..0e901ff04 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -10,9 +10,9 @@ export const ROUTE = { PRODUCTS: '/products', PRODUCT_DETAIL: '/product', ABOUT: '/about', + BLOG_DETAIL: '/blog', ACCOUNT: '/account', RECIPES: '/recipes', - BUSSINESS: '/bussiness', CONTACT: '/contact', FAQ: '/faq',