Update: Add h3 and h4

GunmaRamens · Oct 31, 2023 · 4901afa · 4901afa
1 parent 510d71a
commit 4901afa
Showing 1 changed file with 17 additions and 7 deletions.
diff --git 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 };