From e0f710a5e0eaec3491fd952399c2341b9d120e95 Mon Sep 17 00:00:00 2001
From: Foster Hangdaan <foster@hangdaan.email>
Date: Wed, 26 Jul 2023 22:02:15 -0400
Subject: [PATCH] Move separator into its own component

---
 _components/header.tsx                     |  7 ++-----
 _components/separator.tsx                  |  9 +++++++++
 _includes/styles/base.scss                 | 15 ---------------
 _includes/styles/components/separator.scss | 15 +++++++++++++++
 styles/main.scss                           |  1 +
 5 files changed, 27 insertions(+), 20 deletions(-)
 create mode 100644 _components/separator.tsx
 create mode 100644 _includes/styles/components/separator.scss

diff --git a/_components/header.tsx b/_components/header.tsx
index 93d38f8..ed3ccca 100644
--- a/_components/header.tsx
+++ b/_components/header.tsx
@@ -1,17 +1,14 @@
 export interface Props {
   heading: string;
   subheading?: string;
+  comp: any;
 }
 
 export default function(props: Props) {
   return (
     <header className="page-header">
       <h1>{ props.heading }</h1>
-      <div className="separator">
-        <span className="outer-outline"/>
-        <span className="icon">󱀝</span>
-        <span className="outer-outline"/>
-      </div>
+      {props.comp.separator()}
       <p className="subheading">{ props.subheading }</p>
     </header>
   )
diff --git a/_components/separator.tsx b/_components/separator.tsx
new file mode 100644
index 0000000..265f28a
--- /dev/null
+++ b/_components/separator.tsx
@@ -0,0 +1,9 @@
+export default function () {
+  return (
+    <div className="separator">
+      <span className="outer-outline"/>
+      <span className="icon">󱀝</span>
+      <span className="outer-outline"/>
+    </div>
+  );
+}
diff --git a/_includes/styles/base.scss b/_includes/styles/base.scss
index 3c45d7d..02fbcfa 100644
--- a/_includes/styles/base.scss
+++ b/_includes/styles/base.scss
@@ -89,21 +89,6 @@ .page-header {
   .subheading {
     font-style: italic;
   }
-  .separator {
-    margin: 1rem 0;
-    span {
-      display: inline-block;
-      vertical-align: middle;
-    }
-    .outer-outline {
-      width: 40%;
-      border: 1px solid var(--color-black);
-    }
-    .icon {
-      font-size: 2rem;
-      color: var(--color-black);
-    }
-  }
 }
 
 @for $i from 1 to 3 {
diff --git a/_includes/styles/components/separator.scss b/_includes/styles/components/separator.scss
new file mode 100644
index 0000000..c722492
--- /dev/null
+++ b/_includes/styles/components/separator.scss
@@ -0,0 +1,15 @@
+.separator {
+  margin: 1rem 0;
+  span {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .outer-outline {
+    width: 40%;
+    border: 1px solid var(--color-black);
+  }
+  .icon {
+    font-size: 2rem;
+    color: var(--color-black);
+  }
+}
diff --git a/styles/main.scss b/styles/main.scss
index f20f5a0..4190d35 100644
--- a/styles/main.scss
+++ b/styles/main.scss
@@ -9,3 +9,4 @@
 
 // Components
 @import "styles/components/navbar";
+@import "styles/components/separator";