Merge branch 'm4-tan' of github.com:KieIO/grocery-vercel-commerce into m5-datnguyen

pages/index.tsx

@@ -1,20 +1,14 @@
 
-import { Layout } from 'src/components/common';
+import { CardBlog, CollapseCommon, Layout, RelevantBlogPosts } 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"
 
-const OPTION_SORT = [
-  {
-    name: "By Name"
-  },
-  {
-    name: "Price (High to Low)"
-  },
-  {
-    name: "On Sale"
-  }
+const CONTENT = [
+  "When you’re trying to eat healthier but want something more substantial than a leafy green salad, broccoli salad is there for you. I love the crunch and heft of broccoli, especially when it’s cut up into bite size spoonable pieces.",
+  "Some people aren’t into raw broccoli, but I love it! I always go for the raw broccoli on those vegetable platters that seem to be at every potluck/party you go to.",
+  "This is a simple broccoli salad: you have the bulk of it, raw broccoli; crunchy red onions for a bit of acidity and raw crunch, craisins for sweetness, almonds for a nutty counter point; and a sweet and tangy soy-rice vinegar-sesame dressing.",
 ]
-
 export default function Home() {
   return (
     <>
@@ -24,16 +18,23 @@ export default function Home() {
       <HomeCategories />
       <HomeCollection />
       <HomeVideo />
-      <HomeCTA />
-      <HomeRecipe />
+      <HomeCTA /> */}
+      {/* <HomeRecipe />
       <HomeSubscribe /> */}
-      <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
-      <SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon>
-
-      // todo: uncomment
+      {/* <HomeRecipe /> */}
+      {/* <SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
+      <SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon> */}
+      <CollapseCommon title="This is a subtitle" content={CONTENT} />
+      <CollapseCommon title="This is a subtitle" content={CONTENT} />
+      <CollapseCommon title="This is a subtitle" content={CONTENT} />
+      <CollapseCommon title="This is a subtitle" content={CONTENT} />
+      <CollapseCommon title="This is a subtitle" content={CONTENT} />
+      <CollapseCommon title="This is a subtitle" content={CONTENT} />
+      <RelevantBlogPosts />
+      {/* todo: uncomment */}
       {/* <ModalCreateUserInfo/> */}
     </>
   )
 }
 
-Home.Layout = Layout
+// Home.Layout = Layout

src/components/common/CardBlog/CardBlog.module.scss

@@ -0,0 +1,34 @@
+@import "../../../styles/utilities";
+
+.cardBlogWarpper{
+    max-width: 39.2rem;
+    min-height: 34.4rem;
+    @apply inline-flex flex-col justify-start;
+    .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/CollapseCommon.module.scss

@@ -0,0 +1,55 @@
+@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;
+        }
+        .toggle{
+            &:before {
+                transform: rotate(180deg);
+            }
+            &:after {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    svg: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;
+}

src/components/common/CollapseCommon/CollapseCommon.tsx

@@ -0,0 +1,37 @@
+import s from './CollapseCommon.module.scss'
+import { useState } from 'react'
+import classNames from 'classnames'
+import CollapseContent from './CollapseContent/CollapseContent'
+
+interface CollapseProps{
+    title?: string,
+    content: Array<string>,
+    isToggle?: boolean,
+}
+const CollapseCommon = ({title, content, isToggle}: 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}>
+                <a>{title}</a>
+                <div className={s.toggle}></div>
+            </div>
+            <div className={s.contentContainer}>
+                {
+                    content.map(item => <CollapseContent content={item} />)
+                }
+            </div>
+        </div>
+    )
+}
+
+export default CollapseCommon

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

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

src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx

@@ -0,0 +1,16 @@
+import classNames from 'classnames'
+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/Layout/Layout.tsx

@@ -17,9 +17,9 @@ const Layout: FC<Props> = ({ children }) => {
     return (
         <CommerceProvider locale={locale}>
             <div className={s.mainLayout}>
-                <Header />
+                {/* <Header /> */}
                 <main >{children}</main>
-                <Footer />
+                {/* <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

@@ -34,3 +34,6 @@ export { default as ModalInfo} from "./ModalInfo/ModalInfo"
 export { default as ProductList} from "./ProductList/ProductList"
 export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'
 export { default as CardItemCheckout} from './CardItemCheckout/CardItemCheckout'
+export { default as CardBlog} from './CardBlog/CardBlog'
+export { default as RelevantBlogPosts} from './RelevantBlogPosts/RelevantBlogPosts'
+export { default as CollapseCommon} from './CollapseCommon/CollapseCommon'

src/components/icons/IconMinus.tsx

@@ -0,0 +1,18 @@
+const IconMinus = ({ ...props }) => {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 4"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.333 0.666748H1.66634C1.31272 0.666748 0.973581 0.807224 0.723532 1.05727C0.473484 1.30732 0.333008 1.64646 0.333008 2.00008C0.333008 2.3537 0.473484 2.69284 0.723532 2.94289C0.973581 3.19294 1.31272 3.33342 1.66634 3.33342H20.333C20.6866 3.33342 21.0258 3.19294 21.2758 2.94289C21.5259 2.69284 21.6663 2.3537 21.6663 2.00008C21.6663 1.64646 21.5259 1.30732 21.2758 1.05727C21.0258 0.807224 20.6866 0.666748 20.333 0.666748Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default IconMinus

src/components/icons/IconPlus.tsx

@@ -0,0 +1,18 @@
+const IconPlus = ({ ...props }) => {
+  return (
+    <svg
+      width="22"
+      height="22"
+      viewBox="0 0 22 22"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M20.333 9.66658H12.333V1.66659C12.333 1.31296 12.1925 0.973825 11.9425 0.723776C11.6924 0.473728 11.3533 0.333252 10.9997 0.333252C10.6461 0.333252 10.3069 0.473728 10.0569 0.723776C9.80682 0.973825 9.66634 1.31296 9.66634 1.66659V9.66658H1.66634C1.31272 9.66658 0.973581 9.80706 0.723532 10.0571C0.473484 10.3072 0.333008 10.6463 0.333008 10.9999C0.333008 11.3535 0.473484 11.6927 0.723532 11.9427C0.973581 12.1928 1.31272 12.3333 1.66634 12.3333H9.66634V20.3333C9.66634 20.6869 9.80682 21.026 10.0569 21.2761C10.3069 21.5261 10.6461 21.6666 10.9997 21.6666C11.3533 21.6666 11.6924 21.5261 11.9425 21.2761C12.1925 21.026 12.333 20.6869 12.333 20.3333V12.3333H20.333C20.6866 12.3333 21.0258 12.1928 21.2758 11.9427C21.5259 11.6927 21.6663 11.3535 21.6663 10.9999C21.6663 10.6463 21.5259 10.3072 21.2758 10.0571C21.0258 9.80706 20.6866 9.66658 20.333 9.66658Z"
+        fill="#141414"
+      />
+    </svg>
+  )
+}
+
+export default IconPlus

src/components/icons/Minus.tsx

@@ -1,18 +0,0 @@
-const ArrowRight = ({ ...props }) => {
-  return (
-    <svg
-      width="12"
-      height="12"
-      viewBox="0 0 12 12"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
-        fill="#141414"
-      />
-    </svg>
-  )
-}
-
-export default ArrowRight

src/components/icons/Plus.tsx

@@ -1,18 +0,0 @@
-const ArrowLeft = ({ ...props }) => {
-  return (
-    <svg
-      width="12"
-      height="2"
-      viewBox="0 0 12 2"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
-        fill="#141414"
-      />
-    </svg>
-  )
-}
-
-export default ArrowLeft

src/components/icons/index.ts

@@ -22,3 +22,5 @@ export { default as IconPassword } from './IconPassword'
 export { default as IconPasswordCross } from './IconPasswordCross'
 export { default as IconError } from './IconError'
 export { default as IconCheck } from './IconCheck'
+export { default as IconPlus } from './IconPlus'
+export { default as IconMinus } from './IconMinus'

src/utils/constanst.utils.ts

@@ -9,8 +9,8 @@ export const ROUTE = {
     HOME: '/',
     PRODUCTS: '/products',
     ABOUT: '/about',
+    BLOG_DETAIL: '/blogdetail',
     ACCOUNT: '/account',
-
     BUSSINESS: '/bussiness',
     CONTACT: '/contact',
     FAQ: '/faq',
@@ -39,7 +39,6 @@ export enum ProductFeature {
     Sales = 'Sales',
     NewItem = 'New Item',
     Viewed = 'Viewed',
-
 }
 
 export const KEY = {