Convert a to nextjs link (#33)

compsci-adl · Jan 20, 2024 · 43aeae1 · 43aeae1
1 parent 26a51f5
commit 43aeae1
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 21 deletions.
diff --git a/src/app/(account)/join-us/page.tsx b/src/app/(account)/join-us/page.tsx
@@ -2,6 +2,7 @@
 
 import FancyRectangle from '@/components/FancyRectangle';
 import { SignedIn, SignedOut, useUser } from '@clerk/nextjs';
+import Link from 'next/link';
 import { useEffect } from 'react';
 import ProgressBar from './ProgressBar';
 import StepFour from './steps/StepFour';
@@ -41,9 +42,9 @@ export default function JoinUsPage() {
                             <span className="text-yellow">Membership costs $10</span> for the full
                             year. You can pay for membership online here at our website.
                             Alternatively, you can pay at a club event or contact one of the{' '}
-                            <a href="/about" className="underline">
+                            <Link href="/about" className="underline">
                                 committee members
-                            </a>
+                            </Link>
                             .
                         </p>
                         <p className="mt-4">

diff --git a/src/app/(account)/join-us/steps/StepOne.tsx b/src/app/(account)/join-us/steps/StepOne.tsx
@@ -2,6 +2,7 @@ import Button from '@/components/Button';
 import ControlledField from '@/components/ControlledField';
 import { useSignUp } from '@clerk/nextjs';
 import { zodResolver } from '@hookform/resolvers/zod';
+import Link from 'next/link';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
@@ -161,9 +162,9 @@ export default function StepOne() {
             <div className="flex mt-10">
                 <p className="text-grey text-lg md:text-base">
                     Already have an account?{' '}
-                    <a href="/sign-in" className="text-orange">
+                    <Link href="/sign-in" className="text-orange">
                         Sign in
-                    </a>
+                    </Link>
                 </p>
             </div>
         </div>

diff --git a/src/app/(account)/sign-in/page.tsx b/src/app/(account)/sign-in/page.tsx
@@ -5,6 +5,7 @@ import ControlledField from '@/components/ControlledField';
 import FancyRectangle from '@/components/FancyRectangle';
 import { useSignIn } from '@clerk/clerk-react';
 import { zodResolver } from '@hookform/resolvers/zod';
+import Link from 'next/link';
 import { useForm } from 'react-hook-form';
 import { FcGoogle } from 'react-icons/fc';
 import { z } from 'zod';
@@ -102,12 +103,12 @@ export default function SignInForm() {
                             name="password"
                             type="password"
                         />
-                        <a
+                        <Link
                             href="/forgot-password"
                             className="text-orange flex mb-8 text-lg md:text-base"
                         >
                             Forgot password?
-                        </a>
+                        </Link>
                         <Button type="submit" colour="orange" width="w-[19rem] md:w-[25.5rem]">
                             Sign In
                         </Button>
@@ -117,9 +118,9 @@ export default function SignInForm() {
                     <div className="flex mt-10">
                         <p className="text-grey text-lg md:text-base">
                             Don&apos;t have an account yet?{' '}
-                            <a href="/join-us" className="text-orange">
+                            <Link href="/join-us" className="text-orange">
                                 Join Us
-                            </a>
+                            </Link>
                         </p>
                     </div>
                 </div>

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -3,7 +3,8 @@
 import FancyRectangle from '@/components/FancyRectangle';
 import { useUser } from '@clerk/nextjs';
 import Image from 'next/image';
-import { useState, useEffect, useRef } from 'react';
+import Link from 'next/link';
+import { useEffect, useRef, useState } from 'react';
 import { IoMdClose, IoMdMenu } from 'react-icons/io';
 import Button from './Button';
 import UserButton from './UserButton';
@@ -50,7 +51,7 @@ export default function Header() {
                 >
                     <div className={`flex flex-col w-full ${isMenuOpen ? 'px-8 py-8' : ''}`}>
                         <div className="flex flex-row items-center">
-                            <a href="/" className="flex flex-row items-center">
+                            <Link href="/" className="flex flex-row items-center">
                                 <Image
                                     src="/logo/logo.svg"
                                     alt="Computer Science Club Logo"
@@ -65,7 +66,7 @@ export default function Header() {
                                 >
                                     CS CLUB
                                 </h1>
-                            </a>
+                            </Link>
 
                             <div
                                 className={`md:hidden absolute ${
@@ -107,18 +108,18 @@ export default function Header() {
                             isMenuOpen ? 'mt-12 space-y-8' : 'hidden'
                         } md:flex md:flex-row md:space-x-4 lg:space-x-8 md:space-y-0 mb-4 md:mb-0 text-4xl md:text-base`}
                     >
-                        <a href="/about" className="hover:underline">
+                        <Link href="/about" className="hover:underline">
                             About
-                        </a>
-                        <a href="/events" className="hover:underline">
+                        </Link>
+                        <Link href="/events" className="hover:underline">
                             Events
-                        </a>
-                        <a href="/sponsors" className="hover:underline">
+                        </Link>
+                        <Link href="/sponsors" className="hover:underline">
                             Sponsors
-                        </a>
-                        <a href="/contact" className="hover:underline">
+                        </Link>
+                        <Link href="/contact" className="hover:underline">
                             Contact
-                        </a>
+                        </Link>
                         <div
                             className={`flex flex-col md:flex-row items-center ${
                                 isMenuOpen ? '' : 'hidden'

diff --git a/src/components/UserButton.tsx b/src/components/UserButton.tsx
@@ -1,6 +1,7 @@
 import Button from '@/components/Button';
 import { useClerk, useUser } from '@clerk/clerk-react';
 import Image from 'next/image';
+import Link from 'next/link';
 import { useRef, useState } from 'react';
 import FancyRectangle from './FancyRectangle';
 
@@ -44,9 +45,9 @@ export default function UserButton() {
                             CS Club Drive
                         </a>
                         {/* Link to Manage Account Page */}
-                        <a href="/manage-account" className="hover:underline">
+                        <Link href="/manage-account" className="hover:underline">
                             Manage Account
-                        </a>
+                        </Link>
                         {/* Sign Out */}
                         <Button onClick={handleSignOut} colour="orange" width="w-40 md:w-32">
                             Sign Out