init: label common

pages/index.tsx

@@ -1,6 +1,6 @@
 
 import { useState } from 'react'
-import {CarouselCommon, Layout, QuanittyInput } from 'src/components/common'
+import {CarouselCommon, LabelCommon, Layout, QuanittyInput } from 'src/components/common'
 const dataTest = [{
   text:1
 },{
@@ -19,8 +19,13 @@ export default function Home() {
   return (
     <>
       <CarouselCommon data={dataTest} Component={test} itemKey="test"/>
-      <QuanittyInput type ="default" min={5} max={10} initValue={3}/>
+      <QuanittyInput size ="default" min={5} max={10} initValue={3}/>
-      <QuanittyInput type ="small" min={3} step={10}/>
+      <QuanittyInput size ="small" min={3} step={10}/>
+      <LabelCommon>SEEFOOT</LabelCommon>
+      <LabelCommon type="discount">-15%</LabelCommon>
+      <LabelCommon type="waiting">Waitting</LabelCommon>
+      <LabelCommon type="delivering" >delivering</LabelCommon>
+      <LabelCommon type="delivered">delivered</LabelCommon>
     </>
   )
 }

src/components/common/LabelCommon/LabelCommon.module.scss

@@ -0,0 +1,38 @@
+.labelCommonWarper{
+    display: inline-flex;
+    font-weight: bold;
+    &.defaultSize{
+        max-height: 2rem;
+        line-height: 2rem;
+        font-size: 1.2rem;
+    }
+    &.largeSize{
+        max-height: 2.4rem;
+        line-height: 2.4rem;
+        font-size: 1.6rem;
+    }
+    &.defaultType{
+        @apply bg-positive-dark;
+    }
+    &.discountType{
+        @apply bg-negative;
+    }
+    &.waitingType{
+        @apply bg-warning;
+    }
+    &.deliveringType{
+        @apply bg-info;
+    }
+    &.deliveredType{
+        @apply bg-positive;
+    }
+    &.defaultShape{
+        border-radius: 0.4rem;
+    }
+    &.halfShape{
+        border-radius: 0px 1.4rem 1.4rem 0px;
+    }
+    &.roundShape{
+        border-radius: 1.4rem;
+    }
+}

src/components/common/LabelCommon/LabelCommon.tsx

@@ -0,0 +1,30 @@
+import classNames from 'classnames'
+import React from 'react'
+import s from './LabelCommon.module.scss'
+interface LabelCommonProps extends React.HTMLAttributes<HTMLDivElement> {
+  size?: 'default' | 'large'
+  shape?: 'half' | 'round' | 'default'
+  type?: 'default' | 'discount' | 'waiting' | 'delivering' | 'delivered'
+  color?: string
+}
+
+const LabelCommon = ({
+  size = 'default',
+  type = 'default',
+  shape = "default",
+  children,
+}: LabelCommonProps) => {
+  return (
+    <div
+      className={classNames(s.labelCommonWarper, {
+        [s[`${size}Size`]]: size,
+        [s[`${type}Type`]]: type,
+        [s[`${shape}Shape`]]: shape,
+      })}
+    >
+      {children}
+    </div>
+  )
+}
+
+export default LabelCommon

src/components/common/QuanittyInput/QuanittyInput.tsx

@@ -5,9 +5,9 @@ import { Minus, Plus } from '@components/icons'
 interface QuanittyInputProps
   extends Omit<
     React.InputHTMLAttributes<HTMLInputElement>,
-    'onChange' | 'min' | 'max' | 'step'
+    'onChange' | 'min' | 'max' | 'step' | "type" | "size"
   > {
-  type?: 'default' | 'small'
+  size?: 'default' | 'small'
   onChange?: (value: number) => void
   initValue?: number
   min?: number
@@ -16,7 +16,7 @@ interface QuanittyInputProps
 }
 
 const QuanittyInput = ({
-  type = 'default',
+  size = 'default',
   onChange,
   initValue = 0,
   min,
@@ -62,7 +62,7 @@ const QuanittyInput = ({
   }
 
   return (
-    <div className={classNames(s.quanittyInputWarper, { [s[type]]: type })}>
+    <div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
       <div className={s.minusIcon} onClick={onMinusClick}>
         <Minus />
       </div>

src/components/common/index.ts

@@ -2,5 +2,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 LabelCommon } from './LabelCommon/LabelCommon'
 export { default as Head } from './Head/Head'