From e8c1dcdf2a13df53425371b3ff49a50d9ed4ee8d Mon Sep 17 00:00:00 2001
From: Linna Luo <linnaluo18@gmail.com>
Date: Mon, 23 Aug 2021 14:14:16 -0400
Subject: [PATCH] added custom hr component

---
 components/HorizontalLine.module.css | 7 +++++++
 components/HorizontalLine.tsx        | 7 +++++++
 pages/_app.tsx                       | 3 ++-
 3 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 components/HorizontalLine.module.css
 create mode 100644 components/HorizontalLine.tsx

diff --git a/components/HorizontalLine.module.css b/components/HorizontalLine.module.css
new file mode 100644
index 00000000..16f3ab85
--- /dev/null
+++ b/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);
+}
diff --git a/components/HorizontalLine.tsx b/components/HorizontalLine.tsx
new file mode 100644
index 00000000..598f196c
--- /dev/null
+++ b/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} />;
+}
diff --git a/pages/_app.tsx b/pages/_app.tsx
index 4fc6e4fe..6be350bf 100644
--- a/pages/_app.tsx
+++ b/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 */}