merge: Merge branch 'm1-tan' of github.com:KieIO/grocery-vercel-commerce into m1-datnguyen

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

@@ -95,4 +95,4 @@ export default function Home() {
   )
 }
 
-Home.Layout = Layout
+// Home.Layout = Layout

src/components/common/CollectionHeading/CollectionHeading.module.scss

@@ -0,0 +1,7 @@
+@import '../../../styles/utilities';
+
+.subtitle {
+    @apply spacing-horizontal-left;
+    font-size: var(--font-size);
+    line-height: var(--line-height);   
+}

src/components/common/CollectionHeading/CollectionHeading.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+// import classNames from 'classnames'
+import s from './CollectionHeading.module.scss'
+import HeadingCommon from '../HeadingCommon/HeadingCommon'
+
+interface CollectionHeadingProps {
+    headingType?: 'default' | 'highlight' | 'light'
+    headingText: string;
+    subtitle: string
+}
+
+const CollectionHeading = ({ headingType='default', headingText, subtitle }: CollectionHeadingProps) => {
+
+    return (
+        <section className="collectionHeading">
+            <HeadingCommon headingType={headingType} headingText={headingText}/>
+            <div className={s.subtitle}>{subtitle}</div>
+        </section>
+    )
+
+}
+
+export default CollectionHeading

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

@@ -14,3 +14,4 @@ export { default as Logo} from './Logo/Logo'
 export { default as Inputcommon} from './InputCommon/InputCommon'
 export { default as InputSearch} from './InputSearch/InputSearch'
 export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy'
+export { default as HeadingCommon } from './HeadingCommon/HeadingCommon'