From f08d1073a2d9adeea75e091c4b70a15619fb1818 Mon Sep 17 00:00:00 2001
From: Meng Lin <menglinmaker@gmail.com>
Date: Sun, 14 Jan 2024 22:28:48 +1100
Subject: [PATCH] Replace A link

---
 frontend/static/components/section/hero.astro   | 6 +++---
 frontend/static/components/section/navbar.astro | 9 +++++----
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/frontend/static/components/section/hero.astro b/frontend/static/components/section/hero.astro
index bd50f6d..ea84a90 100644
--- a/frontend/static/components/section/hero.astro
+++ b/frontend/static/components/section/hero.astro
@@ -1,4 +1,5 @@
 ---
+import A from '../ui/A.astro';
 import Container from '../wrapper/container.astro'
 import heroBg from './hero-bg.svg'
 ---
@@ -25,13 +26,12 @@ import heroBg from './hero-bg.svg'
 
     <!-- Buttons -->
     <div class="mt-8 gap-3 flex justify-center">
-      <a
+      <A
         class="inline-flex justify-center items-center gap-x-3 text-center bg-primary-medium border text-white text-sm font-medium rounded-xl py-3 px-4"
         href="/app"
-        
       >
         Create your list &#8594;
-      </a>
+      </A>
     </div>
   </Container>
 </section>
diff --git a/frontend/static/components/section/navbar.astro b/frontend/static/components/section/navbar.astro
index d63a87a..867b4da 100644
--- a/frontend/static/components/section/navbar.astro
+++ b/frontend/static/components/section/navbar.astro
@@ -1,5 +1,6 @@
 ---
 import Favicon from '../svg/Favicon.astro'
+import A from '../ui/A.astro'
 import Container from '../wrapper/container.astro'
 export const brandName1 = 'Grocer'
 export const brandName2 = 'matic'
@@ -26,7 +27,7 @@ export const dropMenuHeight = `${menuItems.length * 2.5 + 0.5}em`
 <nav class="sticky top-0 z-20 bg-white border-b select-none" aria-label="Navbar">
   <input id="hamburger-checkbox" type="checkbox" class="hidden" />
   <Container class="flex items-center py-3">
-    <a
+    <A
       class="flex items-center gap-1.5 w-56"
       href={menuItems[0]?.path}
       aria-label={menuItems[0]?.aria}
@@ -36,7 +37,7 @@ export const dropMenuHeight = `${menuItems.length * 2.5 + 0.5}em`
         <p class="text-2xl font-bold text-primary-medium">{brandName1}</p>
         <p class="text-2xl font-bold text-secondary-medium">{brandName2}</p>
       </div>
-    </a>
+    </A>
     <div class="hidden sm:flex w-full justify-end gap-8 px-6">
       {
         menuItems.map((link) => {
@@ -61,9 +62,9 @@ export const dropMenuHeight = `${menuItems.length * 2.5 + 0.5}em`
     {
       menuItems.map((link) => {
         return (
-          <a class="font-medium text-lg text-neutral-medium" href={link.path}>
+          <A class="font-medium text-lg text-neutral-medium" href={link.path}>
             {link.title}
-          </a>
+          </A>
         )
       })
     }