From bef4bbfad006ad4649ad722b28a645b251d59592 Mon Sep 17 00:00:00 2001
From: quocsonnguyen <quocsonnguyen2010@gmail.com>
Date: Wed, 25 Aug 2021 16:05:52 +0700
Subject: [PATCH] :sparkles: feat: Collection Heading

---
 .../CollectionHeading.module.scss             |  7 ++++++
 .../CollectionHeading/CollectionHeading.tsx   | 23 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/components/common/CollectionHeading/CollectionHeading.module.scss
 create mode 100644 src/components/common/CollectionHeading/CollectionHeading.tsx

diff --git a/src/components/common/CollectionHeading/CollectionHeading.module.scss b/src/components/common/CollectionHeading/CollectionHeading.module.scss
new file mode 100644
index 000000000..f33da69a9
--- /dev/null
+++ b/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);   
+}
\ No newline at end of file
diff --git a/src/components/common/CollectionHeading/CollectionHeading.tsx b/src/components/common/CollectionHeading/CollectionHeading.tsx
new file mode 100644
index 000000000..e52352618
--- /dev/null
+++ b/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