Navbar

src/app/(main)/q/countdown-box.tsx

@@ -18,19 +18,19 @@ const renderer = ({
  <table>
  <tr>
  <td className="w-32 text-center text-7xl">
- {days > 10 ? "" : "0"}
+ {days >= 10 ? "" : "0"}
  {days}
  </td>
  <td className="w-32 text-center text-7xl">
- {hours > 10 ? "" : "0"}
+ {hours >= 10 ? "" : "0"}
  {hours}
  </td>
  <td className="w-32 text-center text-7xl">
- {minutes > 10 ? "" : "0"}
+ {minutes >= 10 ? "" : "0"}
  {minutes}
  </td>
  <td className="w-32 text-center text-7xl">
- {seconds > 10 ? "" : "0"}
+ {seconds >= 10 ? "" : "0"}
  {seconds}
  </td>
  </tr>

src/app/layout.tsx

@@ -7,7 +7,7 @@ import { Toaster } from "sonner";
 export const metadata = {
  title: "Kryptic Hunt | MLSA KIIT Chapter",
  description: "A Fun Kryptic Hunt Game by MLSA KIIT Chapter",
- // icons: [{ rel: "icon", url: "/favicon.ico" }],
+ icons: [{ rel: "icon", url: "/favicon.ico" }],
 };
 
 export default function RootLayout({ children }: { children: ReactNode }) {

src/components/nav-bar-auth-button.tsx

@@ -0,0 +1,24 @@
+import { convertToInitials } from "@/lib/utils";
+import { FaUser } from "react-icons/fa6";
+
+interface NavBarAuthButtonProps {
+ isAuthenticated: boolean;
+ name?: string | null;
+}
+
+const NavBarAuthButton = ({ isAuthenticated, name }: NavBarAuthButtonProps) => {
+ if (isAuthenticated) {
+ return (
+ <span className="flex items-center justify-between gap-2">
+ <FaUser /> 
+ <span className="md:inline hidden">{name ?? "User"}</span>
+ <span className="md:hidden inline">{convertToInitials(name ?? "U s e r")}</span>
+
+ </span>
+ );
+ }
+
+ return <div></div>;
+};
+
+export default NavBarAuthButton;

src/components/nav-bar.tsx

@@ -1,9 +1,46 @@
-import React from 'react'
+import Link from "next/link";
+import { FiBook } from "react-icons/fi";
+import { FaChartColumn } from "react-icons/fa6";
+import Image from "next/image";
+import { getServerAuthSession } from "@/server/auth";
+import NavBarAuthButton from "./nav-bar-auth-button";
 
-const NavBar = () => {
+const NavBar = async () => {
+ const session = await getServerAuthSession();
  return (
- <nav> </nav>
- )
-}
+ <nav className="flex items-center justify-between p-4 px-6">
+ <span className="flex select-none items-center justify-between gap-4 text-xl font-semibold">
+ <Image
+ src="/mlsa-logo.png"
+ width={40}
+ height={40}
+ alt="MLSA Logo"
+ priority={true}
+ quality={100}
+ />
+ <span className="md:inline hidden">Kryptic Hunt</span>
+
+ </span>
+ <ul className="flex items-center justify-between gap-6 text-gray-300">
+ <Link href="/rules">
+ <li className="flex items-center justify-center gap-2 hover:text-gray-100 hover:underline">
+ <FiBook />
+ Rules
+ </li>
+ </Link>
+ <Link href="/leaderboard">
+ <li className="flex items-center justify-center gap-2 hover:text-gray-100 hover:underline">
+ <FaChartColumn />
+ Leaderboard
+ </li>
+ </Link>
+ <li></li>
+ </ul>
+ <div>
+ <NavBarAuthButton isAuthenticated={session ? true : false} name={session?.user?.name} />
+ </div>
+ </nav>
+ );
+};
 
-export default NavBar
+export default NavBar;

src/lib/utils.ts

@@ -0,0 +1,6 @@
+export const convertToInitials = (fullName: string) => {
+ return fullName
+ .split(" ")
+ .map((word) => word.charAt(0).toUpperCase())
+ .join(" ");
+};