From 3215a191411dac75ba057c33b303a9b44890e9b9 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 28 Feb 2024 08:29:45 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20create=20heading?=
 =?UTF-8?q?=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared/Heading/Heading.theme.ts           |  7 +++++
 .../src/components/shared/Heading/Heading.tsx | 30 +++++++++++++++++++
 .../src/components/shared/Heading/index.ts    |  1 +
 3 files changed, 38 insertions(+)
 create mode 100644 packages/frontend/src/components/shared/Heading/Heading.theme.ts
 create mode 100644 packages/frontend/src/components/shared/Heading/Heading.tsx
 create mode 100644 packages/frontend/src/components/shared/Heading/index.ts

diff --git a/packages/frontend/src/components/shared/Heading/Heading.theme.ts b/packages/frontend/src/components/shared/Heading/Heading.theme.ts
new file mode 100644
index 00000000..1c7553bb
--- /dev/null
+++ b/packages/frontend/src/components/shared/Heading/Heading.theme.ts
@@ -0,0 +1,7 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+export const headingTheme = tv({
+  base: ['text-elements-high-em', 'font-display', 'font-semibold'],
+});
+
+export type HeadingVariants = VariantProps<typeof headingTheme>;
diff --git a/packages/frontend/src/components/shared/Heading/Heading.tsx b/packages/frontend/src/components/shared/Heading/Heading.tsx
new file mode 100644
index 00000000..0621039f
--- /dev/null
+++ b/packages/frontend/src/components/shared/Heading/Heading.tsx
@@ -0,0 +1,30 @@
+import React, { type PropsWithChildren } from 'react';
+
+import { headingTheme, type HeadingVariants } from './Heading.theme';
+import { PolymorphicProps } from 'types/common';
+
+export type HeadingElementType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export type HeadingProps<Element extends HeadingElementType> =
+  PropsWithChildren<PolymorphicProps<Element, HeadingVariants>>;
+
+export const Heading = <Element extends HeadingElementType>({
+  children,
+  as,
+  className,
+  ...props
+}: HeadingProps<Element>) => {
+  // Component is the element that will be rendered
+  const Component = as ?? 'h1';
+
+  return (
+    <Component
+      {...props}
+      className={headingTheme({
+        className,
+      })}
+    >
+      {children}
+    </Component>
+  );
+};
diff --git a/packages/frontend/src/components/shared/Heading/index.ts b/packages/frontend/src/components/shared/Heading/index.ts
new file mode 100644
index 00000000..6406e7b0
--- /dev/null
+++ b/packages/frontend/src/components/shared/Heading/index.ts
@@ -0,0 +1 @@
+export * from './Heading';