✨ feat: Heading Common

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'