From aef26bb167308312f7035974dd27789e04b50a32 Mon Sep 17 00:00:00 2001
From: unknown <datnguyen@kie.io>
Date: Tue, 24 Aug 2021 11:16:48 +0700
Subject: [PATCH] :sparkles: feat: label

:%s
---
 pages/index.tsx                                        | 10 +++++-----
 .../common/CarouselCommon/CarouselCommon.tsx           |  2 +-
 .../common/LabelCommon/LabelCommon.module.scss         |  7 ++++++-
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index a73f90cb2..f5dd4d973 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -14,18 +14,18 @@ const dataTest = [{
 },{
   text:6
 }]
-const test = (props:any)=><div className="h-64 bg-yellow-300">{props.text}</div>
+const test = (props:{text:string})=><div className="h-64 bg-yellow-300">{props.text}</div>
 export default function Home() {
   return (
     <>
       <CarouselCommon data={dataTest} Component={test} itemKey="test"/>
       <QuanittyInput size ="default" min={5} max={10} initValue={3}/>
       <QuanittyInput size ="small" min={3} step={10}/>
-      <LabelCommon>SEEFOOT</LabelCommon>
-      <LabelCommon type="discount">-15%</LabelCommon>
+      <LabelCommon type="default" shape="half" >SEEFOOT</LabelCommon>
+      <LabelCommon type="discount" shape="round">-15%</LabelCommon>
       <LabelCommon type="waiting">Waitting</LabelCommon>
-      <LabelCommon type="delivering" >delivering</LabelCommon>
-      <LabelCommon type="delivered">delivered</LabelCommon>
+      <LabelCommon type="delivering" >Delivering</LabelCommon>
+      <LabelCommon type="delivered">Delivered</LabelCommon>
     </>
   )
 }
diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx
index 1c0d98335..074295533 100644
--- a/src/components/common/CarouselCommon/CarouselCommon.tsx
+++ b/src/components/common/CarouselCommon/CarouselCommon.tsx
@@ -6,7 +6,7 @@ import s from "./CaroucelCommon.module.scss"
 interface CarouselCommonProps {
   children?: React.ReactNode
   data?: any[]
-  Component: React.ComponentType
+  Component: React.ComponentType<any>
   isArrow?:Boolean
   itemKey:String
 }
diff --git a/src/components/common/LabelCommon/LabelCommon.module.scss b/src/components/common/LabelCommon/LabelCommon.module.scss
index 94b683c20..20dcb1294 100644
--- a/src/components/common/LabelCommon/LabelCommon.module.scss
+++ b/src/components/common/LabelCommon/LabelCommon.module.scss
@@ -1,15 +1,20 @@
 .labelCommonWarper{
     display: inline-flex;
+    align-items: flex-start;
     font-weight: bold;
+    letter-spacing: 0.01em;
+    @apply text-white text-right;
     &.defaultSize{
-        max-height: 2rem;
+        min-height: 2rem;
         line-height: 2rem;
         font-size: 1.2rem;
+        padding: 0 0.8rem;
     }
     &.largeSize{
         max-height: 2.4rem;
         line-height: 2.4rem;
         font-size: 1.6rem;
+        padding: 0 1.8rem;
     }
     &.defaultType{
         @apply bg-positive-dark;