chore: refactor the account dropdown

Author: webdevcody

src/app/page.tsx

@@ -1,7 +1,9 @@
 export default async function Home() {
   return (
     <>
-      <main className="flex min-h-screen flex-col items-center justify-between p-24"></main>
+      <main className="flex min-h-screen flex-col items-center justify-between p-24">
+        Welcome to CodeRacer! We will work on this landing page soon
+      </main>
     </>
   );
 }

src/components/footer.tsx

@@ -1,7 +1,5 @@
 import * as React from "react";
-
 import { cn } from "@/lib/utils";
-import { ModeToggle } from "@/components/mode-toggle";
 import Link from "next/link";
 import Image from "next/image";
 
@@ -41,7 +39,6 @@ export function Footer({ className }: React.HTMLAttributes<HTMLElement>) {
             .
           </p>
         </div>
-        <ModeToggle />
       </div>
     </footer>
   );

src/components/header.tsx

@@ -3,18 +3,52 @@
 import Image from "next/image";
 import Link from "next/link";
 import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Icons } from "@/components/icons";
+import { SessionProvider, signOut, useSession } from "next-auth/react";
+import { LoginButton } from "./ui/buttons";
+import { ModeToggle } from "./mode-toggle";
 
-import { Button } from "./ui/button";
-import { SessionProvider, useSession } from "next-auth/react";
-import { LoginButton, LogoutButton } from "./ui/buttons";
+const AccountMenu = () => {
+  const session = useSession();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="px-2 py-4 flex gap-4 items-center">
+          <Image
+            className="rounded-full"
+            src={session?.data?.user.image ?? ""}
+            alt="user avatar"
+            height={30}
+            width={30}
+          />
+          <p className="text-gray-700 font-bold">{session?.data?.user?.name}</p>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => signOut()}>
+          <Icons.logout className="mr-2 h-4 w-4" />
+          <span>Logout</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
 
 const Header = () => {
   const [state, setState] = useState(false);
 
   const navigation = [
     { title: "Race", path: "/race" },
     { title: "Leaderboard", path: "/" },
-    { title: "About", path: "/" },
+    // { title: "About", path: "/about" },
   ];
 
   const session = useSession();
@@ -91,19 +125,10 @@ const Header = () => {
               <LoginButton />
             ) : (
               <>
-                <Image
-                  className="rounded-full"
-                  src={session?.data.user.image ?? ""}
-                  alt="user avatar"
-                  height={40}
-                  width={40}
-                />
-                <p className="text-gray-700 font-bold">
-                  {session?.data.user?.name}
-                </p>
-                <LogoutButton />
+                <AccountMenu />
               </>
             )}
+            <ModeToggle />
           </div>
         </div>
       </nav>

src/components/icons.tsx

@@ -1,9 +1,16 @@
-import { Laptop, Moon, SunMedium, type Icon as LucideIcon } from "lucide-react";
+import {
+  Laptop,
+  Moon,
+  SunMedium,
+  type Icon as LucideIcon,
+  LogOut,
+} from "lucide-react";
 
 export type Icon = LucideIcon;
 
 export const Icons = {
   sun: SunMedium,
   moon: Moon,
   laptop: Laptop,
+  logout: LogOut,
 };