convert js to jsx and update pages H1

Author: lekipising

components/Navbar.js components/Navbar.jsxcomponents/Navbar.js renamed to components/Navbar.jsx

@@ -1,6 +1,14 @@
 import Link from "next/link";
 import React from "react";
-import { ABOUT, CONTACT, EVENTS, FORUM, HOME, MEMBERS, NEWS } from "../util/routeConstants";
+import {
+  ABOUT,
+  CONTACT,
+  EVENTS,
+  FORUM,
+  HOME,
+  MEMBERS,
+  NEWS,
+} from "../util/routeConstants";
 
 const Navbar = () => {
   return (
@@ -9,7 +17,9 @@ const Navbar = () => {
         <nav className="nav py-4 flex justify-between items-center">
           <div>
             <Link href={HOME}>
-              <div className="bg-gray-400 w-[137px] h-[61px]"></div>
+              <a>
+                <div className="bg-gray-400 w-[137px] h-[61px]"></div>
+              </a>
             </Link>
           </div>
           <div className="">

pages/_app.js

@@ -1,10 +1,10 @@
-import Navbar from "../components/Navbar";
+import Navbar from "../components/Navbar.jsx";
 import "../styles/globals.css";
 
 function MyApp({ Component, pageProps }) {
   return (
     <>
-      <Navbar/>
+      <Navbar />
       <Component {...pageProps} />
     </>
   );

pages/about.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 export default function AboutPage() {
   return (
-    <main className="flex justify-center items-center">
-      <h1>About page will be here</h1>
+    <main className="flex justify-center items-center min-h-screen">
+      <h1 className="text-white">About page will be here</h1>
     </main>
   );
 }

pages/contact.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 export default function ContactPage() {
   return (
-    <main className="flex justify-center items-center">
-      <h1>Contact page will be here</h1>
+    <main className="flex justify-center items-center min-h-screen">
+      <h1 className="text-white">Contact page will be here</h1>
     </main>
   );
 }

pages/events.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 export default function EventsPage() {
   return (
-    <main className="flex justify-center items-center">
-      <h1>Events page will be here</h1>
+    <main className="flex justify-center items-center min-h-screen">
+      <h1 className="text-white">Events page will be here</h1>
     </main>
   );
 }

pages/forum.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 export default function ForumPage() {
   return (
-    <main className="flex justify-center items-center">
-      <h1>Forum page will be here</h1>
+    <main className="flex justify-center items-center min-h-screen">
+      <h1 className="text-white">Forum page will be here</h1>
     </main>
   );
 }

pages/index.js pages/index.jsxpages/index.js renamed to pages/index.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 export default function MembersPage() {
   return (
-    <main className="flex justify-center items-center">
-      <h1>Members page will be here</h1>
+    <main className="flex justify-center items-center min-h-screen">
+      <h1 className="text-white">Members page will be here</h1>
     </main>
   );
 }

pages/members.jsx

@@ -2,8 +2,8 @@ import React from "react";
 
 export default function NewsPage() {
   return (
-    <main className="flex justify-center items-center">
-      <h1>News page will be here</h1>
+    <main className="flex justify-center items-center min-h-screen">
+      <h1 className="text-white">News page will be here</h1>
     </main>
   );
 }