added footer component

package.json

@@ -17,6 +17,7 @@
     "studio": "prisma studio"
   },
   "dependencies": {
+    "@clerk/nextjs": "^4.29.12",
     "@prisma/client": "^5.10.2",
     "aos": "^3.0.0-beta.6",
     "next": "14.1.0",

src/components/LoginButton.tsx

@@ -8,9 +8,7 @@ import Link from "next/link";
 import { MdPerson } from "react-icons/md";
 
 const MenuList = ({ children }: { children: React.ReactNode }) => (
-  <li className="bg-slate-50 w-full hover:brightness-95 py-1 flex gap-3 items-center">
-    {children}
-  </li>
+  <li className="bg-slate-50 w-full hover:brightness-95 py-1 flex gap-3 items-center">{children}</li>
 );
 
 export default function LoginButton() {
@@ -22,8 +20,7 @@ export default function LoginButton() {
       <div className="relative w-fit h-fit text-slate-900">
         <button
           onClick={() => setShowDropDown(!showDropdown)}
-          className="flex gap-2 hover:brightness-95 duration-75 bg-slate-50/10 p-2 items-center w-12 h-12 justify-center border-2 rounded-full border-slate-500"
-        >
+          className="flex gap-2 hover:brightness-95 duration-75 bg-slate-50/10 p-2 items-center w-12 h-12 justify-center border-2 rounded-full border-slate-500">
           {session.user?.image ? (
             <Image
               src={session.user?.image}
@@ -33,25 +30,18 @@ export default function LoginButton() {
               className="object-contain"
             />
           ) : (
-            <MdPerson
-              size={25}
-              style={{ width: "100%", height: "100%" }}
-              color="gray"
-            />
+            <MdPerson size={25} style={{ width: "100%", height: "100%" }} color="gray" />
           )}
         </button>
 
         {/* Dropdown */}
         <div
           className={`absolute bg-slate-50 py-2 px-[0.6rem] border-2 rounded-md right-0 w-auto delay-75 transition-all ${
-            showDropdown
-              ? "opacity-100 scale-100 top-[100%] right-0"
-              : "opacity-0 scale-0 -top-[100%] -right-[200%]"
+            showDropdown ? "opacity-100 scale-100 top-[100%] right-0" : "opacity-0 scale-0 -top-[100%] -right-[200%]"
           }`}
           onMouseLeave={() => {
             setShowDropDown(false);
-          }}
-        >
+          }}>
           <div className="flex gap-4 border-b-2 pb-2">
             <div className="inline-block items-end w-fit">
               <p className="w-fit text-sm">{session?.user?.name}</p>
@@ -88,10 +78,7 @@ export default function LoginButton() {
           </ul>
 
           <div className="pt-2">
-            <button
-              onClick={() => signOut()}
-              className="hover:border-b-2 border-slate-600 ease-in duration-100 py-1 text-sm"
-            >
+            <button onClick={() => signOut()} className="hover:border-b-2 border-slate-600 ease-in duration-100 py-1 text-sm">
               Sign Out
             </button>
           </div>
@@ -103,8 +90,7 @@ export default function LoginButton() {
     <>
       <button
         onClick={() => signIn()}
-        className="hover:brightness-95 border-2 border-[#F1F2F8] text-[#F1F2F8] px-3 py-2 rounded-full font-outfit tracking-wider text-[14px] md:text-[16px] lg:text-[18px]"
-      >
+        className="hover:brightness-95 border-2 border-[#F1F2F8] text-[#F1F2F8] px-3 py-2 rounded-full font-outfit tracking-wider text-[14px] md:text-[16px] lg:text-[18px]">
         LOGIN
       </button>
     </>

src/middleware.ts

@@ -0,0 +1,13 @@
+import { authMiddleware } from "@clerk/nextjs";
+
+const NEXT_PUBLIC_CLERK_SIGN_IN_URL = process.env.NEXT_PUBLIC_CLERK_SIGN_IN_URL || "auth/sign-in";
+const NEXT_PUBLIC_CLERK_SIGN_UP_URL = process.env.NEXT_PUBLIC_CLERK_SIGN_UP_URL || "auth/sign-up";
+
+export default authMiddleware({
+  apiRoutes: [NEXT_PUBLIC_CLERK_SIGN_IN_URL, NEXT_PUBLIC_CLERK_SIGN_UP_URL],
+  publicRoutes: ["/", "/tentang-bpa", "/akademik", "/acara-kemahasiswaan"],
+});
+
+export const config = {
+  matcher: ["/((?!.+.[w]+$|_next).*)", "/", "/(api|trpc)(.*)"],
+};

src/pages/_app.tsx

@@ -7,6 +7,7 @@ import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import "aos/dist/aos.css";
 import AOS from "aos";
+import { ClerkProvider } from "@clerk/nextjs";
 
 const poppins = Poppins({
   weight: ["200", "300", "400", "500", "600", "700", "800", "900"],
@@ -30,10 +31,7 @@ const outfit = Outfit({
   adjustFontFallback: false,
 });
 
-export default function App({
-  Component,
-  pageProps: { session, ...pageProps },
-}: AppProps) {
+export default function App({ Component, pageProps: { session, ...pageProps } }: AppProps) {
   const router = useRouter();
   const [scrolledOneThirdvw, setScrolledOneThirdvw] = useState(false);
   const [prevScrollPos, setPrevScrollPos] = useState(0);
@@ -75,21 +73,21 @@ export default function App({
   }, [prevScrollPos]);
 
   return (
-    <SessionProvider baseUrl={process.env.BASE_URL} session={session}>
-      <NextNProgress options={{ showSpinner: false }} />
-      <div
-        className={`transition-all duration-500 ${
-          router.pathname === "/" && !scrolledOneThirdvw
-            ? "bg-gradient-to-t from-black to-[#242828] text-slate-100"
-            : "bg-white text-slate-900"
-        }`}
-      >
-        <main
-          className={`flex min-h-screen flex-col items-center justify-between mx-auto overflow-x-clip ${poppins.variable} ${inter.variable} ${outfit.variable}`}
-        >
-          <Component {...pageProps} />
-        </main>
-      </div>
-    </SessionProvider>
+    <ClerkProvider>
+      <SessionProvider baseUrl={process.env.BASE_URL} session={session}>
+        <NextNProgress options={{ showSpinner: false }} />
+        <div
+          className={`transition-all duration-500 ${
+            router.pathname === "/" && !scrolledOneThirdvw
+              ? "bg-gradient-to-t from-black to-[#242828] text-slate-100"
+              : "bg-white text-slate-900"
+          }`}>
+          <main
+            className={`flex min-h-screen flex-col items-center justify-center mx-auto overflow-x-clip ${poppins.variable} ${inter.variable} ${outfit.variable}`}>
+            <Component {...pageProps} />
+          </main>
+        </div>
+      </SessionProvider>
+    </ClerkProvider>
   );
 }

src/pages/auth/sign-in/[[...index]].tsx

@@ -0,0 +1,5 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignIn />;
+}

src/pages/auth/sign-up/[[...index]].tsx

@@ -0,0 +1,5 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignUp />;
+}