✨ feat: Heading Common

package.json

@@ -74,7 +74,6 @@
     "prettier": "^2.3.0",
     "typescript": "4.3.4"
   },
-
   "lint-staged": {
     "**/*.{js,jsx,ts,tsx}": [
       "prettier --write",

pages/index.tsx

@@ -1,33 +1,12 @@
 
-import { CarouselCommon, LabelCommon, Layout, QuanittyInput } from 'src/components/common'
+import { HeadingCommon } from 'src/components/common'
 
-const dataTest = [{
-  text: 1
-}, {
-  text: 2
-}, {
-  text: 3
-}, {
-  text: 4
-}, {
-  text: 5
-}, {
-  text: 6
-}]
-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 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>
+      <HeadingCommon textAlign="center" />
     </>
   )
 }
 
-Home.Layout = Layout
+// Home.Layout = Layout

src/components/common/HeadingCommon/HeadingCommon.module.scss

@@ -0,0 +1,19 @@
+@import '../../../styles/utilities';
+
+.headingCommon {
+  @apply heading-1 font-heading uppercase text-left spacing-horizontal-left;
+
+  &.highlight {
+    color: var(--negative);
+  }
+  &.light {
+    color: var(--disabled);
+  }
+  &.center {
+    @apply text-center
+  }
+
+  @screen md {
+    @apply spacing-horizontal;
+  }
+}

src/components/common/HeadingCommon/HeadingCommon.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import classNames from 'classnames'
+import s from './HeadingCommon.module.scss'
+
+interface HeadingCommonProps {
+    headingType?: 'highlight' | 'light' | 'default';
+    textAlign?: 'center' | 'left';
+    headingText?: string;
+}
+
+const HeadingCommon = ({ headingType='default', textAlign='left', headingText='categories' }: HeadingCommonProps) => {
+
+    return (
+        <div className={classNames(s.headingCommon, {
+            [s[`${headingType}`]]: headingType,
+            [s[`${textAlign}`]]: textAlign
+          })}
+        >{headingText}</div>
+    )
+
+}
+
+export default HeadingCommon

src/components/common/index.ts

@@ -8,3 +8,4 @@ export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
 export { default as ItemWishList} from './ItemWishList/ItemWishList'
 export { default as Logo} from './Logo/Logo'
 export { default as Inputcommon} from './InputCommon/InputCommon'
+export { default as HeadingCommon } from './HeadingCommon/HeadingCommon'