diff --git a/pages/index.tsx b/pages/index.tsx index 92cf18fbb..6eb35bc03 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -4,12 +4,15 @@ import image5 from "../public/assets/images/image5.png" import image6 from "../public/assets/images/image6.png" import image7 from "../public/assets/images/image7.png" import image8 from "../public/assets/images/image8.png" -import image9 from "../public/assets/images/image9.png" -import image10 from "../public/assets/images/image10.png" -import image11 from "../public/assets/images/image11.png" +// import image9 from "../public/assets/images/image9.png" +// import image10 from "../public/assets/images/image10.png" +// import image11 from "../public/assets/images/image11.png" import image12 from "../public/assets/images/image12.png" +import { CollectionCarcoucel } from 'src/components/modules/home' +import HomeRecipe from 'src/components/modules/home/HomeRecipe/HomeRecipe' import image13 from "../public/assets/images/image13.png" import image14 from "../public/assets/images/image14.png" +import { RecipeCardProps } from '../src/components/common/RecipeCard/RecipeCard'; const dataTest = [{ name:"Tomato", weight:"250g", @@ -83,14 +86,38 @@ const dataTest = [{ price:"Rp 27.500", imageSrc:image6.src }] + +const recipe:RecipeCardProps[] = [{ + title: "Special Recipe of Vietnamese Phở", + description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", + imageSrc: image12.src +},{ + title: "Original Recipe of Curry", + description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", + imageSrc: image13.src +},{ + title: "The Best Recipe of Beef Noodle Soup", + description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", + imageSrc: image14.src +},{ + title: "Special Recipe of Vietnamese Phở", + description:"Alright, before we get to the actual recipe, let’s chat for a sec about the ingredients. To make this pho soup recipe, you will need:", + imageSrc: image12.src +},{ + title: "Original Recipe of Curry", + description:"Chicken curry is common to several countries including India, countries in Asia and the Caribbean. My favorite of them though is this aromatic Indian...", + imageSrc: image13.src +},{ + title: "The Best Recipe of Beef Noodle Soup", + description:"The broth for Bun Bo Hue is prepared by slowly simmering various types of beef and pork bones (ox tail, beef shank, pork neck bones, pork feet,...", + imageSrc: image14.src +}] + export default function Home() { return ( <> - -
- - -
+ + ) } diff --git a/src/components/common/CollectionHeading/CollectionHeading.module.scss b/src/components/common/CollectionHeading/CollectionHeading.module.scss index f33da69a9..208a78728 100644 --- a/src/components/common/CollectionHeading/CollectionHeading.module.scss +++ b/src/components/common/CollectionHeading/CollectionHeading.module.scss @@ -1,7 +1,6 @@ @import '../../../styles/utilities'; .subtitle { - @apply spacing-horizontal-left; font-size: var(--font-size); line-height: var(--line-height); } \ No newline at end of file diff --git a/src/components/common/HeadingCommon/HeadingCommon.module.scss b/src/components/common/HeadingCommon/HeadingCommon.module.scss index ed3ea7c93..8e9b62602 100644 --- a/src/components/common/HeadingCommon/HeadingCommon.module.scss +++ b/src/components/common/HeadingCommon/HeadingCommon.module.scss @@ -1,7 +1,7 @@ @import '../../../styles/utilities'; .headingCommon { - @apply heading-1 font-heading uppercase text-left spacing-horizontal-left; + @apply heading-1 font-heading uppercase text-left; &.highlight { color: var(--negative); @@ -13,7 +13,5 @@ @apply text-center; } - @screen md { - @apply spacing-horizontal; - } + } diff --git a/src/components/common/RecipeCard/RecipeCard.tsx b/src/components/common/RecipeCard/RecipeCard.tsx index 71e0c2b41..7499849ca 100644 --- a/src/components/common/RecipeCard/RecipeCard.tsx +++ b/src/components/common/RecipeCard/RecipeCard.tsx @@ -1,7 +1,7 @@ import React from 'react' import { RecipeProps } from 'src/utils/types.utils' import s from './RecipeCard.module.scss' -interface RecipeCardProps extends RecipeProps {} +export interface RecipeCardProps extends RecipeProps {} const RecipeCard = ({ imageSrc, title, description }: RecipeCardProps) => { return ( diff --git a/src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss b/src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss new file mode 100644 index 000000000..60fe60e67 --- /dev/null +++ b/src/components/common/RecipeCaroucel/RecipeCaroucel.module.scss @@ -0,0 +1,12 @@ +@import '../../../styles/utilities'; +.recipeCardWarpper { + @apply spacing-horizontal; + :global(.customArrow) { + &:global(.leftArrow) { + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow) { + right: calc(-6.4rem - 2rem); + } + } +} diff --git a/src/components/common/RecipeCaroucel/RecipeCaroucel.tsx b/src/components/common/RecipeCaroucel/RecipeCaroucel.tsx new file mode 100644 index 000000000..dfa2d1739 --- /dev/null +++ b/src/components/common/RecipeCaroucel/RecipeCaroucel.tsx @@ -0,0 +1,40 @@ +import { TOptionsEvents } from 'keen-slider' +import React from 'react' +import CarouselCommon, { + CarouselCommonProps, +} from '../CarouselCommon/CarouselCommon' +import RecipeCard, { RecipeCardProps } from '../RecipeCard/RecipeCard' +import s from "./RecipeCaroucel.module.scss" + +interface RecipeCaroucelProps + extends Omit, 'Component'|"option"> { + option?:TOptionsEvents + } + +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 1, + mode: 'free', + spacing:24, + breakpoints: { + '(min-width: 768px)': { + slidesPerView: 2, + }, + '(min-width: 1024px)': { + slidesPerView: 3, + }, + }, +} +const RecipeCaroucel = ({ option, data, ...props }: RecipeCaroucelProps) => { + return ( +
+ + data={data} + Component={RecipeCard} + {...props} + option={{ ...OPTION_DEFAULT, ...option }} + /> +
+ ) +} + +export default RecipeCaroucel diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 914281f6f..3e0ccbf43 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -15,3 +15,4 @@ export { default as Inputcommon} from './InputCommon/InputCommon' export { default as InputSearch} from './InputSearch/InputSearch' export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy' export { default as HeadingCommon } from './HeadingCommon/HeadingCommon' +export { default as CollectionHeading } from './CollectionHeading/CollectionHeading' diff --git a/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.module.scss b/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.module.scss new file mode 100644 index 000000000..79d4780bb --- /dev/null +++ b/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.module.scss @@ -0,0 +1,12 @@ +@import '../../../../styles/utilities'; +.colectionCarcoucelWarpper { + padding-top: 5.6rem; + padding-bottom: 6.5rem; + @apply flex flex-col ; + .top { + @apply spacing-horizontal flex w-full justify-between; + .right{ + margin-right: 14.76; + } + } +} diff --git a/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx b/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx new file mode 100644 index 000000000..9e46686bf --- /dev/null +++ b/src/components/modules/home/CollectionCarcoucel/CollectionCarcoucel.tsx @@ -0,0 +1,36 @@ +import React from 'react' +import { CollectionHeading, ProductCaroucel, ViewAllItem } from 'src/components/common' +import { ProductCardProps } from 'src/components/common/ProductCard/ProductCard' +import s from './CollectionCarcoucel.module.scss' +interface ColectionCarcoucelProps { + data: ProductCardProps[] + itemKey: string + title: string + subTitle: string + viewAllLink?: string +} + +const ColectionCarcoucel = ({ + data, + itemKey, + title, + subTitle, +}: ColectionCarcoucelProps) => { + return ( +
+
+
+ +
+
+ +
+
+
+ +
+
+ ) +} + +export default ColectionCarcoucel diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss new file mode 100644 index 000000000..e24f7e026 --- /dev/null +++ b/src/components/modules/home/HomeRecipe/HomeRecipe.module.scss @@ -0,0 +1,33 @@ +@import '../../../../styles/utilities'; + +.homeRecipeWarpper { + padding-top: 5.6rem; + padding-bottom: 6.5rem; + @apply flex flex-col; + .top { + @apply spacing-horizontal flex w-full justify-between; + .right { + margin-right: 14.76; + } + } + .mid{ + padding-top: 3.2rem; + padding-bottom: 3.2rem; + @apply flex justify-start spacing-horizontal; + .tab{ + padding: 1.6rem 1.6rem 0.8rem 1.6rem; + font-size: 3.2rem; + line-height: 4rem; + outline: none; + &.active{ + @apply text-background custom-border-radius bg-primary; + } + + } + } + // :global(.keen-slider__slide){ + // @screen 2xl{ + // margin-right: 2rem; + // } + // } +} diff --git a/src/components/modules/home/HomeRecipe/HomeRecipe.tsx b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx new file mode 100644 index 000000000..01d8b546c --- /dev/null +++ b/src/components/modules/home/HomeRecipe/HomeRecipe.tsx @@ -0,0 +1,37 @@ +import React from 'react' +import { HeadingCommon, ViewAllItem } from 'src/components/common' +import { RecipeCardProps } from 'src/components/common/RecipeCard/RecipeCard' +import RecipeCaroucel from 'src/components/common/RecipeCaroucel/RecipeCaroucel' +import s from './HomeRecipe.module.scss' +import classNames from 'classnames'; +interface HomeRecipeProps { + data: RecipeCardProps[] + itemKey: string + title: string + viewAllLink?: string +} + +const HomeRecipe = ({ data, itemKey, title }: HomeRecipeProps) => { + return ( +
+
+
+ +
+
+ +
+
+
+ + + +
+
+ +
+
+ ) +} + +export default HomeRecipe diff --git a/src/components/modules/home/index.ts b/src/components/modules/home/index.ts index a83854f9f..9a421f615 100644 --- a/src/components/modules/home/index.ts +++ b/src/components/modules/home/index.ts @@ -1 +1,2 @@ export { default as HomeBanner } from './HomeBanner/HomeBanner' +export { default as CollectionCarcoucel } from './CollectionCarcoucel/CollectionCarcoucel'