From f604fbc787e734b6bec501887dff39ddb6ced62b Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Mon, 23 Aug 2021 10:18:37 +0700
Subject: [PATCH] init quanitty input

---
 pages/index.tsx                                  | 15 +++++----------
 .../common/CarouselCommon/CarouselCommon.tsx     |  6 +++---
 src/components/common/Header/Header.tsx          |  4 ++--
 .../QuanittyInput/QuanittyInput.module.scss      | 13 +++++++++++++
 .../common/QuanittyInput/QuanittyInput.tsx       | 16 ++++++++++++++++
 src/components/common/index.ts                   |  1 +
 6 files changed, 40 insertions(+), 15 deletions(-)
 create mode 100644 src/components/common/QuanittyInput/QuanittyInput.module.scss
 create mode 100644 src/components/common/QuanittyInput/QuanittyInput.tsx

diff --git a/pages/index.tsx b/pages/index.tsx
index df3f96d00..2b0afc403 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,5 +1,5 @@
 
-import { ButtonCommon, CarouselCommon, Layout } from 'src/components/common'
+import {CarouselCommon, Layout, QuanittyInput } from 'src/components/common'
 const dataTest = [{
   text:1
 },{
@@ -15,17 +15,12 @@ const dataTest = [{
 }]
 const test = (props:any)=><div className="h-64 bg-yellow-300">{props.text}</div>
 export default function Home() {
-
-
   return (
     <>
-      <div>This is home page</div>
-      <ButtonCommon />
-      <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
-      <p>Go to <code>src/components</code> to make your awesome component!</p>
-      <p>Go to <code>src/styles</code> to find global styles!</p>
-      <CarouselCommon data={dataTest} Component={test} key="test"/>
-        
+      <CarouselCommon data={dataTest} Component={test} itemKey="test"/>
+      <QuanittyInput/>
+      <input type="number" />
+      <input type="text" />
     </>
   )
 }
diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx
index f18746aed..1c0d98335 100644
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -8,10 +8,10 @@ interface CarouselCommonProps {
   data?: any[]
   Component: React.ComponentType
   isArrow?:Boolean
-  key:String
+  itemKey:String
 }
 
-const CarouselCommon = ({ data, Component,key }: CarouselCommonProps) => {
+const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => {
   const [currentSlide, setCurrentSlide] = React.useState(0)
   const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
     slidesPerView: 1,
@@ -31,7 +31,7 @@ const CarouselCommon = ({ data, Component,key }: CarouselCommonProps) => {
     <div className={s.navigation_wrapper}>
       <div ref={sliderRef} className="keen-slider">
         {data?.map((props,index) => (
-          <div className="keen-slider__slide" key={`${key}-${index}`}>
+          <div className="keen-slider__slide" key={`${itemKey}-${index}`}>
             <Component {...props} />
           </div>
         ))}
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index 6314dd7e5..20a4350ef 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -9,7 +9,7 @@ interface Props {
 const Header: FC<Props> = ({ }: Props) => {
     return (
         <div className={s.header}>
-            This is Header
+            {/* This is Header
             <button className={s.btnBlue}>
                 Button
             </button>
@@ -30,7 +30,7 @@ const Header: FC<Props> = ({ }: Props) => {
             </p>
             <p className={s.paragraph}>
                 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, natus?
-            </p>
+            </p> */}
         </div>
     )
 }
diff --git a/src/components/common/QuanittyInput/QuanittyInput.module.scss b/src/components/common/QuanittyInput/QuanittyInput.module.scss
new file mode 100644
index 000000000..eccb9bab2
--- /dev/null
+++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss
@@ -0,0 +1,13 @@
+// .quanittyInput::-webkit-outer-spin-button,
+// .quanittyInput::-webkit-inner-spin-button {
+//   -webkit-appearance: none;
+//   margin: 0;
+// }
+.quanittyInput{
+    @apply bg-background;
+    color: theme("textColor.active");
+    &::-webkit-inner-spin-button, &::-webkit-inner-spin-button{
+        -webkit-appearance: none;
+        margin: 0;
+    }
+}
\ No newline at end of file
diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx
new file mode 100644
index 000000000..db1656993
--- /dev/null
+++ b/src/components/common/QuanittyInput/QuanittyInput.tsx
@@ -0,0 +1,16 @@
+import React, { useState } from 'react'
+import s from "./QuanittyInput.module.scss"
+interface QuanittyInputProps {
+    
+}
+
+const QuanittyInput = (props: QuanittyInputProps) => {
+    const [value, setvalue] = useState(0)
+    return (
+        <div>
+            <input type="number" value={value} onChange={(e)=>setvalue(+e.target.value)} className={s.quanittyInput}/>
+        </div>
+    )
+}
+
+export default QuanittyInput
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index a52628d73..5a5df21c9 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -1,5 +1,6 @@
 export { default as ButtonCommon } from './ButtonCommon/ButtonCommon'
 export { default as Layout } from './Layout/Layout'
 export { default as CarouselCommon } from './CarouselCommon/CarouselCommon'
+export { default as QuanittyInput } from './QuanittyInput/QuanittyInput'
 export { default as Head } from './Head/Head'