♻️ refactor: footer border to separator

Author: tanishqmanuja

src/components/Footer.astro

@@ -1,14 +1,16 @@
 ---
 export interface Props {
-  border?: false | "thick" | "thin" | "none";
+  separator?: false | "thick" | "thin" | "none";
 }
 
-const { border = "thick" } = Astro.props;
+const { separator = "thick" } = Astro.props;
+
+const shouldDisplaySeparator = separator && separator !== "none";
 ---
 
 <footer data-pagefind-ignore>
   <slot />
-  {border && border !== "none" && <hr data-type={border} />}
+  {shouldDisplaySeparator && <hr data-type={separator} />}
   <span class="ff-pixelated"
     >Created with <span class="heart">♥</span> by Tanishq Manuja</span
   >

src/pages/[project]/index.astro

@@ -69,7 +69,7 @@ const ogImage = {
       )
     }
   </main>
-  <Footer border="thin">
+  <Footer separator="thin">
     <ProjectTags class="tags" tags={tags} />
     <nav class="ff-pixelated fs-small | navigation">
       <a class="hoverable" href={url.prev} aria-disabled={!url.prev}>

src/pages/search.astro

@@ -18,7 +18,7 @@ const description = `Search projects`;
   <main data-pagefind-ignore>
     <PageFindSearch />
   </main>
-  <Footer border="thin" />
+  <Footer separator="thin" />
 </Layout>
 
 <style>