From baebc045105b6deeb7ade8289445f793bc68931a Mon Sep 17 00:00:00 2001
From: Nathaniel Tampus <contact@nize.ph>
Date: Wed, 5 Apr 2023 21:30:15 +0800
Subject: [PATCH] add profile & settings buttons to user modal

---
 client/src/components/auth/AuthModal.tsx | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/client/src/components/auth/AuthModal.tsx b/client/src/components/auth/AuthModal.tsx
index b2df1ee..4dcd93e 100644
--- a/client/src/components/auth/AuthModal.tsx
+++ b/client/src/components/auth/AuthModal.tsx
@@ -4,10 +4,12 @@ import { SessionContext } from "@/context/session";
 import { login, logout, register, setGuestSession } from "@/lib/auth";
 import type { FormEvent } from "react";
 import { useContext, useEffect, useRef, useState } from "react";
+import Link from "next/link";
 
 import Guest from "./Guest";
 import Login from "./Login";
 import Register from "./Register";
+import { IconSettings2, IconUserCircle } from "@tabler/icons-react";
 
 export default function AuthModal() {
   const session = useContext(SessionContext);
@@ -104,15 +106,31 @@ export default function AuthModal() {
       >
         <label className="modal-box flex max-w-sm flex-col gap-4 pt-2">
           {session?.user?.id && typeof session.user.id === "number" ? (
-            <div className="flex flex-col pt-2">
+            <div className="flex flex-col gap-2 pt-2">
               <div className="flex w-full justify-between">
-                <div className="div">
+                <div>
                   Logged in as <b>{session.user.name}</b>
                 </div>
                 <a className="link" onClick={clickLogout}>
                   Logout
                 </a>
               </div>
+              <div className="flex w-full flex-col">
+                <Link
+                  className="btn btn-ghost gap-1 normal-case"
+                  href={`/user/${session.user.name}`}
+                  onClick={() => ((modalToggleRef.current as HTMLInputElement).checked = false)}
+                >
+                  <IconUserCircle /> View profile
+                </Link>
+                <Link
+                  className="btn btn-ghost gap-1 normal-case"
+                  href="/settings"
+                  onClick={() => ((modalToggleRef.current as HTMLInputElement).checked = false)}
+                >
+                  <IconSettings2 /> Account settings
+                </Link>
+              </div>
 
               <div className="modal-action">
                 <label htmlFor="auth-modal" className="btn">