From 581aded55513beafd740552d88ddde8bd2337e6e Mon Sep 17 00:00:00 2001
From: John Doe <hamedhasan422421@gmail.com>
Date: Sat, 9 Sep 2023 17:23:54 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20Refactor=20Heading=20component?=
 =?UTF-8?q?=20=F0=9F=91=B7=E2=80=8D=E2=99=82=EF=B8=8F=20Updated=20code=20f?=
 =?UTF-8?q?or=20better=20readability=20=F0=9F=8E=A8=20Improved=20styling?=
 =?UTF-8?q?=20and=20comments=20=F0=9F=9A=80=20Ready=20for=20enhanced=20fea?=
 =?UTF-8?q?tures=20=F0=9F=93=9D=20Updated=20component=20documentation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/shared/Heading.tsx | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)
 create mode 100644 src/shared/Heading.tsx

diff --git a/src/shared/Heading.tsx b/src/shared/Heading.tsx
new file mode 100644
index 0000000..0dd36cc
--- /dev/null
+++ b/src/shared/Heading.tsx
@@ -0,0 +1,36 @@
+import React, { HTMLAttributes, ReactNode } from "react";
+
+export interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
+  fontClass?: string;
+  desc?: ReactNode;
+  isCenter?: boolean;
+}
+
+const Heading: React.FC<HeadingProps> = ({
+  children,
+  desc = "Discover the most outstanding articles in all topics of life. ",
+  className = "mb-10 text-neutral-900 dark:text-neutral-50",
+  isCenter = false,
+  ...args
+}) => {
+  return (
+    <div className={`nc-Section-Heading relative ${className}`}>
+      <div
+        className={
+          isCenter ? "text-center w-full max-w-2xl mx-auto mb-4" : "max-w-2xl"
+        }
+      >
+        <h2 className={`text-3xl md:text-4xl font-semibold`} {...args}>
+          {children || `Section Heading`}
+        </h2>
+        {desc && (
+          <span className="block mt-2 md:mt-3 font-normal text-base sm:text-lg text-neutral-500 dark:text-neutral-400">
+            {desc}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Heading;