Merge pull request #22 from KieIO/m3-datnguyen

M3 datnguyen

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 (
     <>
       <ButtonCommon onClick={onOpen}>open</ButtonCommon>
-      <ModalCommon visible={visible} onClose={onClose}>
-        <div className="">
-          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?
-        </div>
-      </ModalCommon>
-      <ProductCarousel
-        data={dataTest}
-        itemKey="product-2"
-        isDot
-        option={{
-          slidesPerView: 1,
-          breakpoints: {
-            '(min-width: 640px)': {
-              slidesPerView: 3,
-            },
-            '(min-width: 768px)': {
-              slidesPerView: 4,
-            },
-            '(min-width: 1024px)': {
-              slidesPerView: 4.5,
-            },
-            '(min-width: 1280px)': {
-              slidesPerView: 5.5,
-            },
-          },
-        }}
-      />
+      <ModalInfo visible={visible} onClose={onClose}>
+          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?
+      </ModalInfo>
     </>
   )
 }

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;

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 ;
-        }
-    }
-}
+
 

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<HTMLDivElement>(null)
   const clickOutSide = () => {
     onClose && onClose()

src/components/common/ModalConfirm/ModalConfirm.module.scss

@@ -0,0 +1,4 @@
+.footer{
+    margin-top: 4rem;
+    @apply flex justify-end items-center;
+}

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 (
+    <ModalCommon {...props} title={title}>
+      {children}
+      <div className={s.footer}>
+        <div className="mr-4">
+          <ButtonCommon onClick={onCancel} type="light"> {cancelText}</ButtonCommon>
+        </div>
+          <ButtonCommon onClick={onOk}>{okText}</ButtonCommon>
+      </div>
+    </ModalCommon>
+  )
+}
+
+export default ModalConfirm

src/components/common/ModalInfo/ModalInfo.module.scss

@@ -0,0 +1,4 @@
+.footer{
+    margin-top: 4rem;
+    @apply flex justify-end items-center;
+}

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 (
+    <ModalCommon {...props} title={title}>
+      {children}
+      <div className={s.footer}>
+          <ButtonCommon onClick={onOk}>{okText}</ButtonCommon>
+      </div>
+    </ModalCommon>
+  )
+}
+
+export default ModalInfo

src/components/common/PaginationCommon/PaginationCommon.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+
+interface PaginationCommonProps {
+    
+}
+
+const PaginationCommon = (props: PaginationCommonProps) => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default PaginationCommon

src/components/common/index.ts

@@ -29,4 +29,6 @@ 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"
 export { default as ModalCreateUserInfo} from './ModalCreateUserInfo/ModalCreateUserInfo'