added custom hr component

components/HorizontalLine.module.css

@@ -0,0 +1,7 @@
+.line {
+  display: block;
+  margin: calc(1rem / 16) 0 calc(34rem / 16);
+  height: calc(1rem / 16);
+  border: none;
+  background-color: var(--primary-heading);
+}

components/HorizontalLine.tsx

@@ -0,0 +1,7 @@
+import React from "react";
+
+import styles from "./HorizontalLine.module.css";
+
+export function HorizontalLine() {
+  return <hr className={styles.line} />;
+}

pages/_app.tsx

@@ -5,6 +5,7 @@ import React, { ComponentType, ReactNode } from "react";
 
 import { DefaultLayout } from "@/components/DefaultLayout";
 import { Footer } from "@/components/Footer";
+import { HorizontalLine } from "@/components/HorizontalLine";
 import { Link } from "@/components/Link";
 import { Navbar } from "@/components/Navbar";
 import { ThemeProvider } from "@/components/Theme";
@@ -19,7 +20,7 @@ export default function App({ Component, pageProps }: AppProps): JSX.Element {
 
   return (
     <ThemeProvider>
-      <MDXProvider components={{ a: Link }}>
+      <MDXProvider components={{ a: Link, hr: HorizontalLine }}>
         <div className={styles.appContainer}>
           <Navbar />
           {/* Wrapping content with a div to allow for a display: block parent */}