From 4fb13de7374958c845b48d869e604fb6c39be6b1 Mon Sep 17 00:00:00 2001
From: Dominic Arrojado <dominicarrojado@gmail.com>
Date: Wed, 22 May 2024 15:21:10 +0800
Subject: [PATCH] use asChild for link buttons

---
 app/settings/send-link-form.tsx               |  8 ++--
 app/topics/bbdc-appointment-slots/page.tsx    |  6 +--
 app/topics/coe-bidding-results/page.tsx       |  6 +--
 app/topics/fixed-deposit-rates/page.tsx       |  6 +--
 .../japan-visa-appointment-slots/page.tsx     | 42 +++++++++++-------
 app/topics/jetstar-flights/page.tsx           |  6 +--
 .../singapore-airlines-flights/page.tsx       |  6 +--
 app/topics/ssdc-appointment-slots/page.tsx    | 44 +++++++------------
 8 files changed, 60 insertions(+), 64 deletions(-)

diff --git a/app/settings/send-link-form.tsx b/app/settings/send-link-form.tsx
index a19b7fb..b76d730 100644
--- a/app/settings/send-link-form.tsx
+++ b/app/settings/send-link-form.tsx
@@ -82,12 +82,12 @@ export default function SendLinkForm() {
             )}
             Send Link
           </Button>
-          <Link href={Routes.Home} className="w-full">
-            <Button type="button" className="w-full" variant="secondary">
+          <Button className="w-full" variant="secondary" asChild>
+            <Link href={Routes.Home}>
               <ArrowLeftIcon className="mr-2 h-4 w-4" />
               Go Back
-            </Button>
-          </Link>
+            </Link>
+          </Button>
         </CardFooter>
       </Card>
     </form>
diff --git a/app/topics/bbdc-appointment-slots/page.tsx b/app/topics/bbdc-appointment-slots/page.tsx
index b6a87e9..ed28e81 100644
--- a/app/topics/bbdc-appointment-slots/page.tsx
+++ b/app/topics/bbdc-appointment-slots/page.tsx
@@ -99,9 +99,9 @@ export default function BBDCAppointmentSlots() {
         as one of the topics you want to subscribe to.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Link href={Routes.Home}>
-          <Button variant="secondary">Subscribe Now</Button>
-        </Link>
+        <Button variant="secondary" asChild>
+          <Link href={Routes.Home}>Subscribe Now</Link>
+        </Button>
       </div>
     </Container>
   );
diff --git a/app/topics/coe-bidding-results/page.tsx b/app/topics/coe-bidding-results/page.tsx
index 2477087..4496f6e 100644
--- a/app/topics/coe-bidding-results/page.tsx
+++ b/app/topics/coe-bidding-results/page.tsx
@@ -128,9 +128,9 @@ export default function CoeBiddingResults() {
         want to subscribe to.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Link href={Routes.Home}>
-          <Button variant="secondary">Subscribe Now</Button>
-        </Link>
+        <Button variant="secondary" asChild>
+          <Link href={Routes.Home}>Subscribe Now</Link>
+        </Button>
       </div>
     </Container>
   );
diff --git a/app/topics/fixed-deposit-rates/page.tsx b/app/topics/fixed-deposit-rates/page.tsx
index 0f68abc..57470c0 100644
--- a/app/topics/fixed-deposit-rates/page.tsx
+++ b/app/topics/fixed-deposit-rates/page.tsx
@@ -64,9 +64,9 @@ export default function FixedDepositRates() {
         topics you want to subscribe to.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Link href={Routes.Home}>
-          <Button variant="secondary">Subscribe Now</Button>
-        </Link>
+        <Button variant="secondary" asChild>
+          <Link href={Routes.Home}>Subscribe Now</Link>
+        </Button>
       </div>
     </Container>
   );
diff --git a/app/topics/japan-visa-appointment-slots/page.tsx b/app/topics/japan-visa-appointment-slots/page.tsx
index 0ed3d35..f60e385 100644
--- a/app/topics/japan-visa-appointment-slots/page.tsx
+++ b/app/topics/japan-visa-appointment-slots/page.tsx
@@ -86,24 +86,34 @@ export default function JapanVisa() {
         </abbr>
         /spouse).
       </Paragraph>
-      <div className="mt-8 text-center flex flex-col gap-4">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.JapanVisaTourism}`}
-          isExternal
-        >
-          <Button variant="secondary" className="!inline-block">
-            Japan Visa Appointment Slots (Tourism)
+      <div className="mt-8 text-center flex flex-col justify-center gap-4 sm:flex-row">
+        <div>
+          <Button variant="secondary" asChild>
+            <Anchor
+              href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.JapanVisaTourism}`}
+              className="no-underline !inline-block"
+              isExternal
+            >
+              For Tourism
+            </Anchor>
           </Button>
-        </Anchor>
-        <Link href={Routes.Home}>
-          <Button variant="secondary" className="!inline-block">
-            Japan Visa Appointment Slots (Business/
-            <abbr title="Certificate of Eligibility" className="no-underline">
-              COE
-            </abbr>
-            /Spouse)
+        </div>
+        <div>
+          <Button variant="secondary" asChild>
+            <Link href={Routes.Home}>
+              <span>
+                For Business/
+                <abbr
+                  title="Certificate of Eligibility"
+                  className="no-underline"
+                >
+                  COE
+                </abbr>
+                /Spouse
+              </span>
+            </Link>
           </Button>
-        </Link>
+        </div>
       </div>
     </Container>
   );
diff --git a/app/topics/jetstar-flights/page.tsx b/app/topics/jetstar-flights/page.tsx
index 0e61fd9..3489604 100644
--- a/app/topics/jetstar-flights/page.tsx
+++ b/app/topics/jetstar-flights/page.tsx
@@ -72,9 +72,9 @@ export default function JetstarFlights() {
         the topics you want to subscribe to.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Link href={Routes.Home}>
-          <Button variant="secondary">Subscribe Now</Button>
-        </Link>
+        <Button variant="secondary" asChild>
+          <Link href={Routes.Home}>Subscribe Now</Link>
+        </Button>
       </div>
     </Container>
   );
diff --git a/app/topics/singapore-airlines-flights/page.tsx b/app/topics/singapore-airlines-flights/page.tsx
index f5ab012..119b018 100644
--- a/app/topics/singapore-airlines-flights/page.tsx
+++ b/app/topics/singapore-airlines-flights/page.tsx
@@ -76,9 +76,9 @@ export default function SingaporeAirlinesFlights() {
         as one of the topics you want to subscribe to.
       </Paragraph>
       <div className="mt-8 text-center">
-        <Link href={Routes.Home}>
-          <Button variant="secondary">Subscribe Now</Button>
-        </Link>
+        <Button variant="secondary" asChild>
+          <Link href={Routes.Home}>Subscribe Now</Link>
+        </Button>
       </div>
     </Container>
   );
diff --git a/app/topics/ssdc-appointment-slots/page.tsx b/app/topics/ssdc-appointment-slots/page.tsx
index 91654db..ffea87d 100644
--- a/app/topics/ssdc-appointment-slots/page.tsx
+++ b/app/topics/ssdc-appointment-slots/page.tsx
@@ -93,37 +93,23 @@ export default function SsdcAppointmentSlots() {
         the Telegram channel (for practical lesson booking) or to head over to
         the email notifications subscription page (for other appointments).
       </Paragraph>
-      <div className="mt-8 text-center flex flex-col gap-4">
-        <Anchor
-          href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.SsdcPracticalLessonBooking}`}
-          isExternal
-        >
-          <Button variant="secondary" className="!inline-block">
-            <span>
-              <abbr
-                title="Singapore Safety Driving Centre"
-                className="no-underline"
-              >
-                SSDC
-              </abbr>{" "}
-              Appointment Slots (Practical Lesson Booking)
-            </span>
+      <div className="mt-8 text-center flex flex-col justify-center gap-4 sm:flex-row">
+        <div>
+          <Button variant="secondary" asChild>
+            <Anchor
+              href={`${TELEGRAM_SHORT_URL}/${TelegramChannel.SsdcPracticalLessonBooking}`}
+              className="no-underline"
+              isExternal
+            >
+              For Practical Lesson Booking
+            </Anchor>
           </Button>
-        </Anchor>
-        <Link href={Routes.Home}>
-          <Button variant="secondary" className="!inline-block">
-            <span>
-              Other{" "}
-              <abbr
-                title="Singapore Safety Driving Centre"
-                className="no-underline"
-              >
-                SSDC
-              </abbr>{" "}
-              Appointment Slots
-            </span>
+        </div>
+        <div>
+          <Button variant="secondary" asChild>
+            <Link href={Routes.Home}>For Other Appointment Slots</Link>
           </Button>
-        </Link>
+        </div>
       </div>
     </Container>
   );