Create heading component

Author: mcecode

src/components/ui/heading.astro

@@ -0,0 +1,31 @@
+---
+type Props = {
+  content: string | { heading: string; subheading: string };
+};
+
+let heading;
+let subheading;
+
+if (typeof Astro.props.content === "string") {
+  heading = Astro.props.content;
+}
+
+if (typeof Astro.props.content === "object" && Astro.props.content !== null) {
+  heading = Astro.props.content.heading;
+  subheading = Astro.props.content.subheading;
+}
+---
+
+<h1 class:list={{ "no-subheading": typeof subheading !== "string" }}>
+  {heading}
+</h1>
+{typeof subheading === "string" && <p>{subheading}</p>}
+
+<style lang="scss">
+  p {
+    margin-bottom: v-size(8, "em");
+  }
+  .no-subheading {
+    margin-bottom: v-size(5, "em");
+  }
+</style>

src/pages/projects.astro

@@ -1,5 +1,6 @@
 ---
 import ItemCard from "@components/projects/item-card.astro";
+import Heading from "@components/ui/heading.astro";
 import Layout from "@layout/layout.astro";
 
 import eslintConfigMcecodeGif from "@assets/eslint-config-mcecode.gif";
@@ -10,7 +11,7 @@ import pdfMadeEasyGif from "@assets/pdf-made-easy.gif";
 ---
 
 <Layout title="Projects">
-  <h1>Projects</h1>
+  <Heading content="Projects" />
   <ul>
     <ItemCard
       title="PDF Made Easy"
@@ -59,9 +60,3 @@ import pdfMadeEasyGif from "@assets/pdf-made-easy.gif";
     />
   </ul>
 </Layout>
-
-<style lang="scss">
-  h1 {
-    margin-bottom: v-size(5, "em");
-  }
-</style>