diff --git a/pages/index.tsx b/pages/index.tsx index 877f18def..f59f55ebf 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,27 +1,88 @@ import { Layout, ProductCard } from 'src/components/common' import {CarouselCommon } from 'src/components/common' -import image1 from "../public/assets/images/image5.png" +import ProductCaroucel from 'src/components/common/ProductCaroucel/ProductCaroucel' +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" const dataTest = [{ - text:1 + name:"Tomato", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image5.src },{ - text:2 + name:"Cucumber", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image6.src },{ - text:3 + name:"Carrot", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image7.src },{ - text:4 + name:"Salad", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image8.src },{ - text:5 + name:"Tomato", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image5.src },{ - text:6 + name:"Cucumber", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image6.src +},{ + name:"Tomato", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image5.src +},{ + name:"Cucumber", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image6.src +},{ + name:"Carrot", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image7.src +},{ + name:"Salad", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image8.src +},{ + name:"Tomato", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image5.src +},{ + name:"Cucumber", + weight:"250g", + category:"VEGGIE", + price:"Rp 27.500", + imageSrc:image6.src }] -const test = (props:{text:string})=>
{props.text}
export default function Home() { return ( <> - - - + ) } diff --git a/src/components/common/ButtonCommon/ButtonCommon.module.scss b/src/components/common/ButtonCommon/ButtonCommon.module.scss index c9a457973..7b82fe12e 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.module.scss +++ b/src/components/common/ButtonCommon/ButtonCommon.module.scss @@ -53,11 +53,11 @@ &.ghost { @apply bg-white; - color: var(--primary); - border: 1px solid var(--primary); + color: var(--text-active); + border: 1px solid var(--text-active); &.loading { &::before { - border-top-color: var(--primary); + border-top-color: var(--text-active); } } } diff --git a/src/components/common/CarouselCommon/CaroucelCommon.module.scss b/src/components/common/CarouselCommon/CaroucelCommon.module.scss index b1cc3e01e..f38db8f73 100644 --- a/src/components/common/CarouselCommon/CaroucelCommon.module.scss +++ b/src/components/common/CarouselCommon/CaroucelCommon.module.scss @@ -1,5 +1,25 @@ -.navigation_wrapper{ +@import '../../../styles/utilities'; +.navigationWrapper{ @apply relative; min-height: theme("caroucel.arrow-height") ; - + .isPadding{ + @apply spacing-horizontal; + } + :global(.customArrow) { + width: 64px; + height: 64px; + &:focus{ + outline: none; + } + @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100; + &:global(.leftArrow){ + @apply left-0; + } + &:global(.rightArrow){ + @apply right-0; + } + &:global(.isDisabledArrow){ + @apply hidden ; + } + } } \ No newline at end of file diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx index 074295533..2d5d467e2 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.tsx +++ b/src/components/common/CarouselCommon/CarouselCommon.tsx @@ -1,21 +1,30 @@ import { useKeenSlider } from 'keen-slider/react' import React from 'react' import 'keen-slider/keen-slider.min.css' -import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'; -import s from "./CaroucelCommon.module.scss" -interface CarouselCommonProps { - children?: React.ReactNode - data?: any[] - Component: React.ComponentType - isArrow?:Boolean - itemKey:String +import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow' +import s from './CaroucelCommon.module.scss' +import { TOptionsEvents } from 'keen-slider' +import classNames from 'classnames' +export interface CarouselCommonProps { + data: T[] + Component: React.ComponentType + isArrow?: Boolean + itemKey: String + option: TOptionsEvents + keenClassname?: string + isPadding?: boolean } -const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => { +const CarouselCommon = ({ + data, + Component, + itemKey, + keenClassname,isPadding=false, + option: { slideChanged, ...sliderOption }, +}: CarouselCommonProps) => { const [currentSlide, setCurrentSlide] = React.useState(0) const [sliderRef, slider] = useKeenSlider({ - slidesPerView: 1, - initial: 0, + ...sliderOption, slideChanged(s) { setCurrentSlide(s.details().relativeSlide) }, @@ -28,28 +37,28 @@ const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => { slider.prev() } return ( -
-
- {data?.map((props,index) => ( +
+
+ {data?.map((props, index) => (
))}
{slider && ( - <> - - - - )} + <> + + + + )}
) } diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss index ec1bf0d88..cf01ab543 100644 --- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss +++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss @@ -1,17 +1,37 @@ -.custom_arrow{ - width: 64px; - height: 64px; - &:focus{ - outline: none; - } - @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100; - &.left{ - @apply left-0; - } - &.right{ - @apply right-0; - } - &.isDisabled{ - @apply hidden ; +// .customArrow{ +// width: 64px; +// height: 64px; +// &:focus{ +// outline: none; +// } +// @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100; +// &.leftArrow{ +// @apply left-0; +// } +// &.rightArrow{ +// @apply right-0; +// } +// &.isDisabled{ +// @apply hidden ; +// } +// } +.navigationWrapper{ + :global(.customArrow) { + width: 64px; + height: 64px; + &:focus{ + outline: none; + } + @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100; + &.leftArrow{ + @apply left-0; + } + &.rightArrow{ + @apply right-0; + } + &.isDisabled{ + @apply hidden ; + } } } + diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx index 779591671..b4f1ee86c 100644 --- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx +++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx @@ -2,11 +2,13 @@ import classNames from 'classnames' import React from 'react' import ArrowLeft from 'src/components/icons/ArrowLeft' import ArrowRight from 'src/components/icons/ArrowRight' -import s from "./CustomCarouselArrow.module.scss" +import "./CustomCarouselArrow.module.scss" +// import s from "../CaroucelCommon.module.scss" + interface CustomCarouselArrowProps extends React.ButtonHTMLAttributes { side: 'left' | 'right' - isDisabled:Boolean + isDisabled?:Boolean } export const CustomCarouselArrow = ({ @@ -16,7 +18,8 @@ export const CustomCarouselArrow = ({ return ( diff --git a/src/components/common/ItemWishList/ItemWishList.module.scss b/src/components/common/ItemWishList/ItemWishList.module.scss index c827f4ff6..c7d30d246 100644 --- a/src/components/common/ItemWishList/ItemWishList.module.scss +++ b/src/components/common/ItemWishList/ItemWishList.module.scss @@ -2,9 +2,14 @@ .heartToggle{ cursor: pointer; - width: 4.8rem; - height: 4.8rem; - display: flex; - justify-content: center; - align-items: center; + width: 2.4rem; + height: 2.4rem; + path{ + stroke: theme("colors.primary"); + } +} +.isToggleOn{ + svg path{ + stroke: theme("colors.primary"); + } } \ No newline at end of file diff --git a/src/components/common/ItemWishList/ItemWishList.tsx b/src/components/common/ItemWishList/ItemWishList.tsx index 3474178e6..5adef90b8 100644 --- a/src/components/common/ItemWishList/ItemWishList.tsx +++ b/src/components/common/ItemWishList/ItemWishList.tsx @@ -1,19 +1,27 @@ -import { Heart } from '@components/icons' -import React, { useState } from 'react' +import classNames from 'classnames' +import IconHeart from 'src/components/icons/IconHeart' +import React, { memo } from 'react' import s from './ItemWishList.module.scss' interface Props { - className?: string - children?: any + isActive?: boolean, + onClick?: () => void + onChange?: () => void } -const ItemWishList = ({}:Props) => { - const [isClick,setClick] = useState(false) +const ItemWishList = memo(({isActive, onClick, onChange}:Props) => { + const handleClick = () => { + isActive = !isActive + } return( -
setClick(!isClick)}> - +
+
) -} +}) export default ItemWishList \ No newline at end of file diff --git a/src/components/common/Logo/Logo.module.scss b/src/components/common/Logo/Logo.module.scss index 72cde5cd0..2f5964f92 100644 --- a/src/components/common/Logo/Logo.module.scss +++ b/src/components/common/Logo/Logo.module.scss @@ -1,6 +1,4 @@ @import '../../../styles/utilities'; -@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap'); - .logo{ display: flex; @@ -12,7 +10,7 @@ margin-right: 1.2rem; } .conTent{ - font-family: 'Poppins', sans-serif; + @apply font-logo; text-transform: uppercase; line-height: 3.2rem; letter-spacing: -0.02rem; diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx index 44302e00b..06f9d57f3 100644 --- a/src/components/common/Logo/Logo.tsx +++ b/src/components/common/Logo/Logo.tsx @@ -1,15 +1,13 @@ import s from './Logo.module.scss' interface Props { - className?: string - children?: any + } const Logo = ({}: Props) => { return(
-
ONLINE GROCERY diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss index a854a7d2b..980459efb 100644 --- a/src/components/common/ProductCard/ProductCard.module.scss +++ b/src/components/common/ProductCard/ProductCard.module.scss @@ -1,24 +1,30 @@ .productCardWarpper{ - max-width: 20.8rem; - max-height: 31.8rem; + width: 20.8rem; + height: 31.8rem; padding: 1.2rem 1.2rem 0 1.2rem; - @apply border border-solid border-black; + margin-bottom: 1px; + @apply inline-flex flex-col justify-between; .cardTop{ - @apply border border-solid border-yellow-300 relative; - max-height: 13.8rem; + @apply relative; + height: 13.8rem; + width: 100%; .productImage{ + height: 100%; + width: 100%; @apply flex justify-center items-center; img{ @apply inline; } - .productLabel{ - @apply absolute left-0 bottom-0; - } + } + .productLabel{ + @apply absolute left-0 bottom-0; } } .cardMid{ - padding: 1.6rem 0; - .cardMid{ + // padding: 1.6rem 0; + min-height: 10.4rem; + @apply flex flex-col justify-between; + .cardMidTop{ .productname{ font-weight: bold; line-height: 2.4rem; @@ -33,7 +39,6 @@ } } .cardMidBot{ - margin-top: 2.8rem; @apply flex justify-between items-center border-t border-solid border-line; .productPrice{ @apply font-bold; @@ -44,6 +49,7 @@ } } .cardBot{ + max-height: 4rem; @apply flex justify-between items-center; .cardButton{ width: 13.6rem; diff --git a/src/components/common/ProductCard/ProductCard.tsx b/src/components/common/ProductCard/ProductCard.tsx index 1422c4a3b..5f46dd419 100644 --- a/src/components/common/ProductCard/ProductCard.tsx +++ b/src/components/common/ProductCard/ProductCard.tsx @@ -1,17 +1,13 @@ import React from 'react' +import { ProductProps } from 'src/utils/types.utils' import ButtonCommon from '../ButtonCommon/ButtonCommon' import ButtonIconBuy from '../ButtonIconBuy/ButtonIconBuy' import ItemWishList from '../ItemWishList/ItemWishList' import LabelCommon from '../LabelCommon/LabelCommon' import s from './ProductCard.module.scss' -interface ProductCardProps { - category: string - name: string - weight: string - price: string +export interface ProductCardProps extends ProductProps { buttonText?: string - imageSrc: string } const ProductCard = ({ @@ -23,16 +19,16 @@ const ProductCard = ({ imageSrc, }: ProductCardProps) => { return ( -
-
+
+
image +
{category}
-
-
-
+
+
{name}
{weight}
@@ -43,16 +39,16 @@ const ProductCard = ({
- -
+
+
{buttonText}
- - +
+
) } diff --git a/src/components/common/ProductCaroucel/ProductCaroucel.module.scss b/src/components/common/ProductCaroucel/ProductCaroucel.module.scss new file mode 100644 index 000000000..c8750168f --- /dev/null +++ b/src/components/common/ProductCaroucel/ProductCaroucel.module.scss @@ -0,0 +1,12 @@ +@import "../../../styles/utilities"; +.productCardWarpper{ + @apply spacing-horizontal; + :global(.customArrow) { + &:global(.leftArrow){ + left: calc(-6.4rem - 2rem); + } + &:global(.rightArrow){ + right: calc(-6.4rem - 2rem); + } + } +} \ No newline at end of file diff --git a/src/components/common/ProductCaroucel/ProductCaroucel.tsx b/src/components/common/ProductCaroucel/ProductCaroucel.tsx new file mode 100644 index 000000000..af7a412cf --- /dev/null +++ b/src/components/common/ProductCaroucel/ProductCaroucel.tsx @@ -0,0 +1,39 @@ +import { TOptionsEvents } from 'keen-slider' +import React from 'react' +import CarouselCommon, { + CarouselCommonProps, +} from '../CarouselCommon/CarouselCommon' +import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard' +import s from "./ProductCaroucel.module.scss" + +interface ProductCaroucelProps + extends Omit, 'Component'|"option"> { + option?:TOptionsEvents + } + +const OPTION_DEFAULT: TOptionsEvents = { + slidesPerView: 2, + mode: 'free', + breakpoints: { + '(min-width: 768px)': { + slidesPerView: 3, + }, + '(min-width: 1024px)': { + slidesPerView: 5.5, + }, + }, +} +const ProductCaroucel = ({ option, data, ...props }: ProductCaroucelProps) => { + return ( +
+ + data={data} + Component={ProductCard} + {...props} + option={{ ...OPTION_DEFAULT, ...option }} + /> +
+ ) +} + +export default ProductCaroucel diff --git a/src/components/common/ViewAllItem/ViewAllItem.module.scss b/src/components/common/ViewAllItem/ViewAllItem.module.scss index aee521b2d..0e481494f 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.module.scss +++ b/src/components/common/ViewAllItem/ViewAllItem.module.scss @@ -1,16 +1,18 @@ @import '../../../styles/utilities'; -@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap'); .viewAll{ display: flex; color: theme("colors.primary"); .conTent{ margin: 0.8rem 0.8rem 0.8rem 1.6rem; - font-family: 'Nunito', sans-serif; + font-family: var(--font-sans); font-weight: bold; } .vecTor{ margin: 0.8rem 0rem 0.8rem 0rem; + svg path{ + fill: theme("colors.primary"); + } } } diff --git a/src/components/common/ViewAllItem/ViewAllItem.tsx b/src/components/common/ViewAllItem/ViewAllItem.tsx index 4b6daff4c..b9d4e4efe 100644 --- a/src/components/common/ViewAllItem/ViewAllItem.tsx +++ b/src/components/common/ViewAllItem/ViewAllItem.tsx @@ -1,10 +1,8 @@ -import Vector from 'src/components/icons/Vector' +import IconVector from 'src/components/icons/IconVector' import s from './ViewAllItem.module.scss' import Link from 'next/link' interface Props { - className?: string - children?: any link?: string } @@ -17,7 +15,7 @@ const ViewAllItem = ({ link }: Props) => {
- +
) diff --git a/src/components/icons/Heart.tsx b/src/components/icons/Heart.tsx deleted file mode 100644 index f8c39b6e5..000000000 --- a/src/components/icons/Heart.tsx +++ /dev/null @@ -1,20 +0,0 @@ - -const Vector = ({ ...props }) => { - return ( - - - - ) - } - - export default Vector \ No newline at end of file diff --git a/src/components/icons/IconHeart.tsx b/src/components/icons/IconHeart.tsx new file mode 100644 index 000000000..0d868c5e7 --- /dev/null +++ b/src/components/icons/IconHeart.tsx @@ -0,0 +1,23 @@ + +const IconHeart = ({ ...props }) => { + return ( + + + + ) + } + + export default IconHeart \ No newline at end of file diff --git a/src/components/icons/Vector.tsx b/src/components/icons/IconVector.tsx similarity index 92% rename from src/components/icons/Vector.tsx rename to src/components/icons/IconVector.tsx index 989f8a125..e4a10f559 100644 --- a/src/components/icons/Vector.tsx +++ b/src/components/icons/IconVector.tsx @@ -1,5 +1,5 @@ -const Vector = ({ ...props }) => { +const IconVector = ({ ...props }) => { return ( { > ) } - export default Vector \ No newline at end of file + export default IconVector \ No newline at end of file diff --git a/src/utils/types.utils.ts b/src/utils/types.utils.ts new file mode 100644 index 000000000..ca4b84823 --- /dev/null +++ b/src/utils/types.utils.ts @@ -0,0 +1,7 @@ +export interface ProductProps { + category: string + name: string + weight: string + price: string + imageSrc: string +} \ No newline at end of file