From d9e0cc248f667e4b8f8386bdb491ebc2a809b0f1 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 30 Aug 2021 13:41:45 +0700 Subject: [PATCH 1/4] :sparkles: feat: Modal confirm modal info :%s --- pages/test.tsx | 129 +----------------- .../common/ModalCommon/ModalCommon.tsx | 4 +- .../ModalConfirm/ModalConfirm.module.scss | 4 + .../common/ModalConfirm/ModalConfirm.tsx | 34 +++++ .../common/ModalInfo/ModalInfo.module.scss | 4 + src/components/common/ModalInfo/ModalInfo.tsx | 27 ++++ src/components/common/index.ts | 2 + 7 files changed, 79 insertions(+), 125 deletions(-) create mode 100644 src/components/common/ModalConfirm/ModalConfirm.module.scss create mode 100644 src/components/common/ModalConfirm/ModalConfirm.tsx create mode 100644 src/components/common/ModalInfo/ModalInfo.module.scss create mode 100644 src/components/common/ModalInfo/ModalInfo.tsx diff --git a/pages/test.tsx b/pages/test.tsx index 5ac220819..6a1922f5a 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -3,99 +3,11 @@ import { ButtonCommon, Layout, ModalCommon, + ModalConfirm, + ModalInfo, ProductCarousel, } from 'src/components/common' -import { CollectionCarcousel } from 'src/components/modules/home' -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 = [ - { - 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, - }, - { - 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, - }, -] + export default function Test() { const [visible, setVisible] = useState(false) const onClose = () => { @@ -107,38 +19,9 @@ export default function Test() { return ( <> open - -
- Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur - officiis dolorum ea incidunt. Sint, cum ullam. Labore vero quod - itaque, officia magni molestias! Architecto deserunt soluta laborum - commodi nesciunt delectus similique temporibus distinctio? Facere - eaque minima enim modi magni, laudantium, animi mollitia beatae - repudiandae maxime labore error nesciunt, nisi est? -
- - + + Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi? + ) } diff --git a/src/components/common/ModalCommon/ModalCommon.tsx b/src/components/common/ModalCommon/ModalCommon.tsx index 2ed90a3b3..75222c162 100644 --- a/src/components/common/ModalCommon/ModalCommon.tsx +++ b/src/components/common/ModalCommon/ModalCommon.tsx @@ -2,7 +2,7 @@ import React, { useRef } from 'react' import { Close } from 'src/components/icons' import { useOnClickOutside } from 'src/utils/useClickOutSide' import s from './ModalCommon.module.scss' -interface Props { +export interface ModalCommonProps { onClose: () => void visible: boolean children: React.ReactNode @@ -10,7 +10,7 @@ interface Props { maxWidth?:string } -const ModalCommon = ({ onClose, visible, children, title="Modal",maxWidth }: Props) => { +const ModalCommon = ({ onClose, visible, children, title="Modal",maxWidth }: ModalCommonProps) => { const modalRef = useRef(null) const clickOutSide = () => { onClose && onClose() diff --git a/src/components/common/ModalConfirm/ModalConfirm.module.scss b/src/components/common/ModalConfirm/ModalConfirm.module.scss new file mode 100644 index 000000000..ac167b2a2 --- /dev/null +++ b/src/components/common/ModalConfirm/ModalConfirm.module.scss @@ -0,0 +1,4 @@ +.footer{ + margin-top: 4rem; + @apply flex justify-end items-center; +} \ No newline at end of file diff --git a/src/components/common/ModalConfirm/ModalConfirm.tsx b/src/components/common/ModalConfirm/ModalConfirm.tsx new file mode 100644 index 000000000..1e425482f --- /dev/null +++ b/src/components/common/ModalConfirm/ModalConfirm.tsx @@ -0,0 +1,34 @@ +import React from 'react' +import ButtonCommon from '../ButtonCommon/ButtonCommon' +import ModalCommon, { ModalCommonProps } from '../ModalCommon/ModalCommon' +import s from './ModalConfirm.module.scss' +interface ModalConfirmProps extends ModalCommonProps { + okText?: String + cancelText?: String + onOk?: () => void + onCancel?: () => void +} + +const ModalConfirm = ({ + okText = 'Ok', + cancelText = 'cancel', + onOk, + onCancel, + children, + title = 'Confirm', + ...props +}: ModalConfirmProps) => { + return ( + + {children} +
+
+ {cancelText} +
+ {okText} +
+ + ) +} + +export default ModalConfirm diff --git a/src/components/common/ModalInfo/ModalInfo.module.scss b/src/components/common/ModalInfo/ModalInfo.module.scss new file mode 100644 index 000000000..ac167b2a2 --- /dev/null +++ b/src/components/common/ModalInfo/ModalInfo.module.scss @@ -0,0 +1,4 @@ +.footer{ + margin-top: 4rem; + @apply flex justify-end items-center; +} \ No newline at end of file diff --git a/src/components/common/ModalInfo/ModalInfo.tsx b/src/components/common/ModalInfo/ModalInfo.tsx new file mode 100644 index 000000000..1880d8f63 --- /dev/null +++ b/src/components/common/ModalInfo/ModalInfo.tsx @@ -0,0 +1,27 @@ +import React from 'react' +import ButtonCommon from '../ButtonCommon/ButtonCommon' +import ModalCommon, { ModalCommonProps } from '../ModalCommon/ModalCommon' +import s from './ModalInfo.module.scss' +interface ModalInfoProps extends ModalCommonProps { + okText?: String + onOk?: () => void +} + +const ModalInfo = ({ + okText = 'Ok', + onOk, + children, + title = 'Confirm', + ...props +}: ModalInfoProps) => { + return ( + + {children} +
+ {okText} +
+ + ) +} + +export default ModalInfo diff --git a/src/components/common/index.ts b/src/components/common/index.ts index dc0288966..ba7743f70 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -28,3 +28,5 @@ export { default as NotiMessage} from './NotiMessage/NotiMessage' export { default as VideoPlayer} from './VideoPlayer/VideoPlayer' export { default as SelectCommon} from './SelectCommon/SelectCommon' export { default as ModalCommon} from './ModalCommon/ModalCommon' +export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm" +export { default as ModalInfo} from "./ModalInfo/ModalInfo" From 7904ec4d8535380bc7dd4d962f7fa1e196cb9e8f Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 30 Aug 2021 15:26:35 +0700 Subject: [PATCH 2/4] :sparkles: feat: Modal confirm modal info :%s --- .../CarouselCommon/CarouselCommon.module.scss | 10 ++++++++-- .../CustomCarouselArrow.module.scss | 20 +------------------ .../PaginationCommon.module.scss | 0 .../PaginationCommon/PaginationCommon.tsx | 15 ++++++++++++++ 4 files changed, 24 insertions(+), 21 deletions(-) create mode 100644 src/components/common/PaginationCommon/PaginationCommon.module.scss create mode 100644 src/components/common/PaginationCommon/PaginationCommon.tsx diff --git a/src/components/common/CarouselCommon/CarouselCommon.module.scss b/src/components/common/CarouselCommon/CarouselCommon.module.scss index 802c25bb0..da306f38f 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.module.scss +++ b/src/components/common/CarouselCommon/CarouselCommon.module.scss @@ -13,10 +13,16 @@ } @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; + @apply hidden left-0; + @screen md { + @apply flex + } } &:global(.rightArrow) { - @apply right-0; + @apply hidden right-0; + @screen md { + @apply flex; + } } &:global(.isDisabledArrow) { @apply hidden; diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss index fb174c66c..139597f9c 100644 --- a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss +++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss @@ -1,20 +1,2 @@ -.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/PaginationCommon/PaginationCommon.module.scss b/src/components/common/PaginationCommon/PaginationCommon.module.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/components/common/PaginationCommon/PaginationCommon.tsx b/src/components/common/PaginationCommon/PaginationCommon.tsx new file mode 100644 index 000000000..59bbd3baa --- /dev/null +++ b/src/components/common/PaginationCommon/PaginationCommon.tsx @@ -0,0 +1,15 @@ +import React from 'react' + +interface PaginationCommonProps { + +} + +const PaginationCommon = (props: PaginationCommonProps) => { + return ( +
+ +
+ ) +} + +export default PaginationCommon From 78813a063cd418d2a40c2e0481a7420de620a16e Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 31 Aug 2021 10:58:52 +0700 Subject: [PATCH 3/4] feat; pagination productList --- pages/test.tsx | 228 +++++++++++++++++- .../PaginationCommon.module.scss | 22 ++ .../PaginationCommon/PaginationCommon.tsx | 77 +++++- .../components/PaginationItem.tsx | 21 ++ .../ProductList/ProductList.module.scss | 11 + .../common/ProductList/ProductList.tsx | 30 +++ src/components/common/index.ts | 1 + src/components/icons/ArrowLeftSmall.tsx | 18 ++ src/components/icons/ArrowRightSmall.tsx | 18 ++ src/components/icons/index.ts | 2 + tailwind.config.js | 5 +- 11 files changed, 421 insertions(+), 12 deletions(-) create mode 100644 src/components/common/PaginationCommon/components/PaginationItem.tsx create mode 100644 src/components/common/ProductList/ProductList.module.scss create mode 100644 src/components/common/ProductList/ProductList.tsx create mode 100644 src/components/icons/ArrowLeftSmall.tsx create mode 100644 src/components/icons/ArrowRightSmall.tsx diff --git a/pages/test.tsx b/pages/test.tsx index 6a1922f5a..9f6a08ec0 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -6,8 +6,232 @@ import { ModalConfirm, ModalInfo, ProductCarousel, + ProductList, } from 'src/components/common' - +import PaginationCommon from 'src/components/common/PaginationCommon/PaginationCommon' +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 = [ + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.src, + }, + { + name: 'Tomato', + weight: '250g', + category: 'VEGGIE', + price: 'Rp 27.500', + imageSrc: image5.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, + }, + { + 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, + }, +] export default function Test() { const [visible, setVisible] = useState(false) const onClose = () => { @@ -22,6 +246,8 @@ export default function Test() { Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi qui, esse eos nobis soluta suscipit aliquid nostrum corporis. Nihil eligendi similique recusandae minus mollitia aliquam, molestias fugit tenetur voluptatibus maiores et. Quaerat labore corporis inventore nostrum, amet autem exercitationem eligendi? + + ) } diff --git a/src/components/common/PaginationCommon/PaginationCommon.module.scss b/src/components/common/PaginationCommon/PaginationCommon.module.scss index e69de29bb..6470cd72f 100644 --- a/src/components/common/PaginationCommon/PaginationCommon.module.scss +++ b/src/components/common/PaginationCommon/PaginationCommon.module.scss @@ -0,0 +1,22 @@ +.warpper{ + .item{ + @apply inline-flex items-center justify-center cursor-pointer; + background-color: var(--gray); + margin: 0 0.4rem; + width: 3.2rem; + height: 3.2rem; + &.active{ + @apply border border-solid; + border-color: var(--text-active); + background-color: var(--white); + } + &.disable{ + svg{ + path{ + fill: var(--disabled) + } + } + @apply text-disabled cursor-not-allowed; + } + } +} \ No newline at end of file diff --git a/src/components/common/PaginationCommon/PaginationCommon.tsx b/src/components/common/PaginationCommon/PaginationCommon.tsx index 59bbd3baa..d0df5efe7 100644 --- a/src/components/common/PaginationCommon/PaginationCommon.tsx +++ b/src/components/common/PaginationCommon/PaginationCommon.tsx @@ -1,15 +1,74 @@ -import React from 'react' - +import classNames from 'classnames' +import React, { useEffect, useState } from 'react' +import { ArrowLeftSmall, ArrowRightSmall } from 'src/components/icons' +import PaginationItem from './components/PaginationItem' +import s from './PaginationCommon.module.scss' interface PaginationCommonProps { - + defaultCurrent?: number + pageSize: number + total: number + onChange?: (page: number, pageSize: number) => void } -const PaginationCommon = (props: PaginationCommonProps) => { - return ( -
- -
- ) +const PaginationCommon = ({ + total, + pageSize, + defaultCurrent, + onChange, +}: PaginationCommonProps) => { + const [pageNum, setPageNum] = useState(0) + const [currentPage, setCurrentPage] = useState(0) + useEffect(() => { + setPageNum(Math.ceil(total / pageSize)) + }, [total, pageSize]) + + useEffect(() => { + if (defaultCurrent) { + setCurrentPage(defaultCurrent) + } + }, [defaultCurrent]) + + const onPageClick = (page: number) => { + setCurrentPage(page) + onChange && onChange(page, pageSize) + } + + const onPrevClick = () => { + setCurrentPage(currentPage - 1 < 0 ? 0 : currentPage - 1) + } + + const onNextClick = () => { + setCurrentPage((currentPage + 1) > (pageNum - 1) ? (pageNum - 1) : currentPage + 1) + } + + return ( +
+
+ +
+ {[...Array(pageNum).keys()].map((index) => { + return ( + + ) + })} +
= pageNum - 1, + })} + onClick={onNextClick} + > + = pageNum} /> +
+
+ ) } export default PaginationCommon diff --git a/src/components/common/PaginationCommon/components/PaginationItem.tsx b/src/components/common/PaginationCommon/components/PaginationItem.tsx new file mode 100644 index 000000000..e5f526bc4 --- /dev/null +++ b/src/components/common/PaginationCommon/components/PaginationItem.tsx @@ -0,0 +1,21 @@ +import classNames from 'classnames' +import React from 'react' +import s from "../PaginationCommon.module.scss" +interface PaginationItemProps { + onClick:(page:number)=>void + page:number + active:boolean +} + +const PaginationItem = ({onClick, page, active}: PaginationItemProps) => { + const onPageClick = () => { + onClick && onClick(page) + } + return ( +
+ {page+1} +
+ ) +} + +export default PaginationItem diff --git a/src/components/common/ProductList/ProductList.module.scss b/src/components/common/ProductList/ProductList.module.scss new file mode 100644 index 000000000..040275c7a --- /dev/null +++ b/src/components/common/ProductList/ProductList.module.scss @@ -0,0 +1,11 @@ +.wrapper{ + .list{ + max-width: 109.4rem; + @apply flex flex-wrap; + } + .pagination{ + padding-top: 4.8rem; + max-width: 109.4rem; + @apply flex justify-center items-center ; + } +} \ No newline at end of file diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx new file mode 100644 index 000000000..22b80b358 --- /dev/null +++ b/src/components/common/ProductList/ProductList.tsx @@ -0,0 +1,30 @@ +import React, { useState } from 'react' +import PaginationCommon from '../PaginationCommon/PaginationCommon' +import ProductCard, { ProductCardProps } from '../ProductCard/ProductCard' +import s from "./ProductList.module.scss" +interface ProductListProps { + data: ProductCardProps[] +} + +const ProductList = ({data}: ProductListProps) => { + const [currentPage, setCurrentPage] = useState(0) + const onPageChange = (page:number) => { + setCurrentPage(page) + } + return ( +
+
+ { + data.slice(currentPage*20,(currentPage+1)*20).map((product)=>{ + return + }) + } +
+
+ +
+
+ ) +} + +export default ProductList diff --git a/src/components/common/index.ts b/src/components/common/index.ts index ba7743f70..65f90627e 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -30,3 +30,4 @@ export { default as SelectCommon} from './SelectCommon/SelectCommon' export { default as ModalCommon} from './ModalCommon/ModalCommon' export { default as ModalConfirm} from "./ModalConfirm/ModalConfirm" export { default as ModalInfo} from "./ModalInfo/ModalInfo" +export { default as ProductList} from "./ProductList/ProductList" diff --git a/src/components/icons/ArrowLeftSmall.tsx b/src/components/icons/ArrowLeftSmall.tsx new file mode 100644 index 000000000..7bb82665d --- /dev/null +++ b/src/components/icons/ArrowLeftSmall.tsx @@ -0,0 +1,18 @@ +const ArrowLeft = ({ ...props }) => { + return ( + + + + ) +} + +export default ArrowLeft diff --git a/src/components/icons/ArrowRightSmall.tsx b/src/components/icons/ArrowRightSmall.tsx new file mode 100644 index 000000000..36b4cd589 --- /dev/null +++ b/src/components/icons/ArrowRightSmall.tsx @@ -0,0 +1,18 @@ +const ArrowRight = ({ ...props }) => { + return ( + + + + ) +} + +export default ArrowRight diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 02b4947cb..2fdbd96f8 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -14,4 +14,6 @@ export { default as IconGoogleColor } from './IconGoogleColor' export { default as IconApple } from './IconApple' export { default as ArrowLeft } from './ArrowLeft' export { default as ArrowRight } from './ArrowRight' +export { default as ArrowLeftSmall } from './ArrowLeftSmall' +export { default as ArrowRightSmall } from './ArrowRightSmall' export { default as Close } from './Close' diff --git a/tailwind.config.js b/tailwind.config.js index f94c85fd8..028e78f05 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -109,12 +109,13 @@ module.exports = { rounded: '.8rem', }, screens: { + 'sm-only': {'min': '0', 'max': '767px'}, 'sm': '640px', // => @media (min-width: 640px) { ... } - + 'md-only': {'min': '768px', 'max': '1023px'}, 'md': '768px', // => @media (min-width: 768px) { ... } - + 'lg-only': {'min': '1024px', 'max': '1279px'}, 'lg': '1024px', // => @media (min-width: 1024px) { ... } From 7e2eb087bd57361eeb5c631772c2f1549017fc14 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 31 Aug 2021 16:46:24 +0700 Subject: [PATCH 4/4] :hammer: refactor: ProductList :%s --- pages/test.tsx | 168 ++++++++++++++++++ .../ProductCard/ProductCard.module.scss | 3 +- .../ProductList/ProductList.module.scss | 6 +- .../common/ProductList/ProductList.tsx | 4 +- 4 files changed, 175 insertions(+), 6 deletions(-) diff --git a/pages/test.tsx b/pages/test.tsx index 9f6a08ec0..a0d99978c 100644 --- a/pages/test.tsx +++ b/pages/test.tsx @@ -182,6 +182,132 @@ const dataTest = [ price: 'Rp 27.500', imageSrc: image5.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: '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: '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: '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: '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: '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', @@ -217,6 +343,48 @@ const dataTest = [ price: 'Rp 27.500', imageSrc: image8.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: '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: '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', diff --git a/src/components/common/ProductCard/ProductCard.module.scss b/src/components/common/ProductCard/ProductCard.module.scss index 97dce1794..65e81c811 100644 --- a/src/components/common/ProductCard/ProductCard.module.scss +++ b/src/components/common/ProductCard/ProductCard.module.scss @@ -57,7 +57,8 @@ .cardBot{ min-height: 4rem; @apply flex justify-between items-center; - .cardButton{ + .cardIcon{ + margin-right: 0.8rem; } } } \ No newline at end of file diff --git a/src/components/common/ProductList/ProductList.module.scss b/src/components/common/ProductList/ProductList.module.scss index 040275c7a..c49696ea5 100644 --- a/src/components/common/ProductList/ProductList.module.scss +++ b/src/components/common/ProductList/ProductList.module.scss @@ -1,11 +1,11 @@ .wrapper{ .list{ - max-width: 109.4rem; - @apply flex flex-wrap; + // max-width: 109.4rem; + @apply flex flex-wrap justify-around; } .pagination{ padding-top: 4.8rem; - max-width: 109.4rem; + // max-width: 109.4rem; @apply flex justify-center items-center ; } } \ No newline at end of file diff --git a/src/components/common/ProductList/ProductList.tsx b/src/components/common/ProductList/ProductList.tsx index 22b80b358..7428e3a63 100644 --- a/src/components/common/ProductList/ProductList.tsx +++ b/src/components/common/ProductList/ProductList.tsx @@ -15,8 +15,8 @@ const ProductList = ({data}: ProductListProps) => {
{ - data.slice(currentPage*20,(currentPage+1)*20).map((product)=>{ - return + data.slice(currentPage*20,(currentPage+1)*20).map((product,index)=>{ + return }) }