Move separator into its own component

_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>
   )

_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>
+  );
+}

_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 {

_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);
+  }
+}

styles/main.scss

@@ -9,3 +9,4 @@
 
 // Components
 @import "styles/components/navbar";
+@import "styles/components/separator";