fix: fix RelevantBlogPosts

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 (
     <>
       <HomeBanner />
+      <HomeBanner/>
       <HomeFeature />
       <HomeCategories />
       <HomeCollection />
@@ -12,8 +16,7 @@ export default function Home() {
       <HomeCTA />
       <HomeRecipe />
       <HomeSubscribe />
-
-      {/* // todo: uncomment */}
+      {/* todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}
     </>
   )

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;
+    }
+}

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 (
+    <div className={s.cardBlogWarpper}>
+      <Link href={link}>
+        <div className={s.image}>
+          <img src={imageSrc} alt="image cardblog" />
+        </div>
+      </Link>
+      <Link href={link}>
+        <div className={s.title}>{title}</div>
+      </Link>
+      <div className={s.description}>{description}</div>
+    </div>
+  )
+}
+
+export default CardBlog

src/components/common/CarouselCommon/CarouselCommon.tsx

@@ -28,7 +28,6 @@ const CarouselCommon = <T,>({
   option: { slideChanged,slidesPerView, ...sliderOption },
 }: CarouselCommonProps<T>) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
-  // const [dotActive, setDotActive] = React.useState<number>(0)
   const [dotArr, setDotArr] = React.useState<number[]>([])
   const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
     ...sliderOption,

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;
+    }
+}

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<string>,
+    isToggle?: boolean,
+    link?: string,
+}
+const CollapseChild = ({title, content, isToggle=false, link="/"}: CollapseProps) => {
+    const [isActive, changeActive] = useState(isToggle)
+
+    const handleToggle = () => {
+        changeActive(!isActive)
+    }
+    return(
+        <div className={classNames({
+            [s.collapseWrapper] : true,
+            [s.isActive] : isActive 
+        })}
+            onClick = { handleToggle }
+        >    
+            <div className={s.title}>
+                <Link href={link}>
+                    <a>{title}</a>
+                </Link>
+                <div className={s.toggle}></div>
+            </div>
+            <div className={s.contentContainer}>
+                {
+                    content.map(item => <CollapseContent key={item} content={item} />)
+                }
+            </div>
+        </div>
+    )
+}
+
+export default CollapseChild

src/components/common/CollapseCommon/CollapseChild/CollapseContent/CollapseContent.module.scss

@@ -0,0 +1,3 @@
+.content {
+    margin-top: 1.6rem;
+}

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 (
+        <div className={s.content}>
+            {content}
+        </div>
+    )
+}
+
+export default CollapseContent

src/components/common/CollapseCommon/CollapseCommon.tsx

@@ -0,0 +1,19 @@
+import CollapseChild from './CollapseChild/CollapseChild'
+
+interface CollapseCommonProps{
+    data: {title: string, content: Array<string>, link: string}[],
+}
+
+const CollapseCommon = ({data}: CollapseCommonProps) => {
+    return (
+        <section>
+            {
+                data.map(item =>
+                    <CollapseChild key={item.title} title={item.title} content={item.content} link={item.link} />
+                )
+            }
+        </section>
+    )
+}
+
+export default CollapseCommon

src/components/common/Layout/Layout.tsx

@@ -29,10 +29,6 @@ const Layout: FC<Props> = ({ children }) => {
             <div className={s.mainLayout}>
                 <Header />
                 <main >{children}</main>
-                <button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
-                <CartDrawer
-                    visible={visibleCartDrawer}
-                    onClose={closeCartDrawer} />
                 <Footer />
             </div>
         </CommerceProvider>

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);
+        }
+      }
+    }
+  }
+}

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<CarouselCommonProps<BlogCardProps>, '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 (
+    <div className={s.blogCardWarpper}>
+      <CarouselCommon<BlogCardProps>
+        data={data}
+        Component={BlogCard}
+        {...props}
+        option={{ ...OPTION_DEFAULT, ...option }}
+      />
+    </div>
+  )
+}
+
+export default BlogPostCarousel

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;
+      }
+    }
+  }
+}

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 (
+      <div className={s.blogPostWarpper}>
+        <div className={s.top}>
+          <div className={s.left}>
+            <HeadingCommon>{title}</HeadingCommon>
+          </div>
+          <div className={s.right}>
+            <ViewAllItem link="#"/>
+          </div>
+        </div>
+        <div className={s.bot}>
+          <BlogPostCarousel data={data} itemKey={itemKey} />
+        </div>
+      </div>
+    )
+  }
+  
+  export default RelevantBlogPosts

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'

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}/>
         </div>
-        
+        <div className={s.relevantBlogPosts}>
+            <RelevantBlogPosts title="You will like also" />
+        </div>
             
         </>
     )

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',