Replace hr with Hr component

src/components/Footer.astro

@@ -1,9 +1,10 @@
 ---
+import Hr from "./Hr.astro";
 import LinkButton from "./LinkButton.astro";
 ---
 
 <footer>
-  <hr class="border-skin-line" />
+  <Hr className="px-0" />
   <div class="footer-wrapper">
     <div class="social-icons">
       <LinkButton href="https://github.com/satnaing" className="link-button">

src/components/Header.astro

@@ -1,4 +1,6 @@
 ---
+import Hr from "./Hr.astro";
+
 export interface Props {
   activeNav?: "posts" | "tags" | "about";
 }
@@ -55,7 +57,7 @@ const { activeNav } = Astro.props;
       </div>
     </nav>
   </div>
-  <hr />
+  <Hr />
 </header>
 
 <style>

src/pages/index.astro

@@ -5,6 +5,7 @@ import Card from "@components/Card.astro";
 import Footer from "@components/Footer.astro";
 import LinkButton from "@components/LinkButton.astro";
 import getSortedPosts from "src/utils/getSortedPosts";
+import Hr from "@components/Hr.astro";
 
 export interface Frontmatter {
   title: string;
@@ -83,7 +84,7 @@ const sortedPosts = getSortedPosts(posts);
       </div>
     </section>
 
-    <hr class="h-row" />
+    <Hr />
 
     <section id="featured">
       <h2>Featured</h2>
@@ -103,7 +104,7 @@ const sortedPosts = getSortedPosts(posts);
       </ul>
     </section>
 
-    <hr class="h-row" />
+    <Hr />
 
     <section id="recent-posts">
       <h2>Recent Posts</h2>