use asChild for link buttons

dominicarrojado · May 22, 2024 · 4fb13de · 4fb13de
1 parent deab830
commit 4fb13de
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 64 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );