init quanitty input

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>
+      <CarouselCommon data={dataTest} Component={test} itemKey="test"/>
-      <ButtonCommon />
+      <QuanittyInput/>
-      <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
+      <input type="number" />
-      <p>Go to <code>src/components</code> to make your awesome component!</p>
+      <input type="text" />
-      <p>Go to <code>src/styles</code> to find global styles!</p>
-      <CarouselCommon data={dataTest} Component={test} key="test"/>
-        
     </>
   )
 }

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>
         ))}

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>
     )
 }

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

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

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'