diff --git a/pages/index.tsx b/pages/index.tsx index e428ff533..c193554a9 100644 --- a/pages/index.tsx +++ b/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() { - - + */} + {/* */} - Sort By - Sort By - - // todo: uncomment + {/* */} + {/* Sort By + Sort By */} + + + + + + + + {/* todo: uncomment */} {/* */} ) } -Home.Layout = Layout +// Home.Layout = Layout 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..8f18e5753 --- /dev/null +++ b/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; + } +} \ 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/CollapseCommon.module.scss b/src/components/common/CollapseCommon/CollapseCommon.module.scss new file mode 100644 index 000000000..4686a886a --- /dev/null +++ b/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; +} diff --git a/src/components/common/CollapseCommon/CollapseCommon.tsx b/src/components/common/CollapseCommon/CollapseCommon.tsx new file mode 100644 index 000000000..1fdce09da --- /dev/null +++ b/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, + isToggle?: boolean, +} +const CollapseCommon = ({title, content, isToggle}: CollapseProps) => { + const [isActive, changeActive] = useState(isToggle) + + const handleToggle = () => { + changeActive(!isActive) + } + return( +
+
+ {title} +
+
+
+ { + content.map(item => ) + } +
+
+ ) +} + +export default CollapseCommon \ No newline at end of file diff --git a/src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss b/src/components/common/CollapseCommon/CollapseContent/CollapseContent.module.scss new file mode 100644 index 000000000..2d29c4b51 --- /dev/null +++ b/src/components/common/CollapseCommon/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/CollapseContent/CollapseContent.tsx b/src/components/common/CollapseCommon/CollapseContent/CollapseContent.tsx new file mode 100644 index 000000000..44a5624f3 --- /dev/null +++ b/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 ( +
+ {content} +
+ ) +} + +export default CollapseContent \ No newline at end of file diff --git a/src/components/common/Layout/Layout.tsx b/src/components/common/Layout/Layout.tsx index aa5da11e1..af7ab25c7 100644 --- a/src/components/common/Layout/Layout.tsx +++ b/src/components/common/Layout/Layout.tsx @@ -17,9 +17,9 @@ const Layout: FC = ({ children }) => { return (
-
+ {/*
*/}
{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 b4d2591cb..bf7ac1d93 100644 --- a/src/components/common/index.ts +++ b/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' diff --git a/src/components/icons/IconMinus.tsx b/src/components/icons/IconMinus.tsx new file mode 100644 index 000000000..ba4eb2fc0 --- /dev/null +++ b/src/components/icons/IconMinus.tsx @@ -0,0 +1,18 @@ +const IconMinus = ({ ...props }) => { + return ( + + + + ) +} + +export default IconMinus diff --git a/src/components/icons/IconPlus.tsx b/src/components/icons/IconPlus.tsx new file mode 100644 index 000000000..a532c6244 --- /dev/null +++ b/src/components/icons/IconPlus.tsx @@ -0,0 +1,18 @@ +const IconPlus = ({ ...props }) => { + return ( + + + + ) +} + +export default IconPlus diff --git a/src/components/icons/Minus.tsx b/src/components/icons/Minus.tsx deleted file mode 100644 index 7c3b97d30..000000000 --- a/src/components/icons/Minus.tsx +++ /dev/null @@ -1,18 +0,0 @@ -const ArrowRight = ({ ...props }) => { - return ( - - - - ) -} - -export default ArrowRight diff --git a/src/components/icons/Plus.tsx b/src/components/icons/Plus.tsx deleted file mode 100644 index c8b2fcca3..000000000 --- a/src/components/icons/Plus.tsx +++ /dev/null @@ -1,18 +0,0 @@ -const ArrowLeft = ({ ...props }) => { - return ( - - - - ) -} - -export default ArrowLeft diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 763390c0a..3473bb29e 100644 --- a/src/components/icons/index.ts +++ b/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' \ No newline at end of file diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index c7002a730..f299e8e20 100644 --- a/src/utils/constanst.utils.ts +++ b/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 = {