From 4901afa0cdf30b4f135a36d5df61653d826207a1 Mon Sep 17 00:00:00 2001
From: hayao <hayao@fascode.net>
Date: Tue, 31 Oct 2023 14:13:22 +0900
Subject: [PATCH] Update: Add h3 and h4

---
 src/components/Heading.tsx | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/components/Heading.tsx b/src/components/Heading.tsx
index da995bc..4663537 100644
--- a/src/components/Heading.tsx
+++ b/src/components/Heading.tsx
@@ -1,10 +1,20 @@
 import classNames from "classnames";
 
-export default class Heading {
-    static h2(props: React.HtmlHTMLAttributes<HTMLHeadingElement>) {
-        return <h2 {...props} className={classNames(props.className, "prose", "prose-xl font-bold my-3")}></h2>;
-    }
-    static h1(props: React.HtmlHTMLAttributes<HTMLHeadingElement>) {
-        return <h1 {...props} className={`prose prose-2xl my-3 font-bold ${props.className}`}></h1>;
-    }
+const commonClassNames = ["prose", "my-3", "font-bold"];
+type headingProps = React.HtmlHTMLAttributes<HTMLHeadingElement>;
+
+export function h1(props: headingProps) {
+    return <h1 {...props} className={classNames(props.className, commonClassNames, "prose-2xl")}></h1>;
+}
+export function h2(props: headingProps) {
+    return <h2 {...props} className={classNames(props.className, commonClassNames, "prose-xl")}></h2>;
+}
+export function h3(props: headingProps) {
+    return <h3 {...props} className={classNames(props.className, commonClassNames, "prose-lg")}></h3>;
 }
+
+export function h4(props: headingProps) {
+    return <h4 {...props} className={classNames(props.className, commonClassNames, "prose-md")}></h4>;
+}
+
+export default { h1, h2, h3, h4 };