add profile & settings buttons to user modal

This commit is contained in:
Nathaniel Tampus
2023-04-05 21:30:15 +08:00
parent d0f316c59b
commit baebc04510

View File

@@ -4,10 +4,12 @@ import { SessionContext } from "@/context/session";
import { login, logout, register, setGuestSession } from "@/lib/auth"; import { login, logout, register, setGuestSession } from "@/lib/auth";
import type { FormEvent } from "react"; import type { FormEvent } from "react";
import { useContext, useEffect, useRef, useState } from "react"; import { useContext, useEffect, useRef, useState } from "react";
import Link from "next/link";
import Guest from "./Guest"; import Guest from "./Guest";
import Login from "./Login"; import Login from "./Login";
import Register from "./Register"; import Register from "./Register";
import { IconSettings2, IconUserCircle } from "@tabler/icons-react";
export default function AuthModal() { export default function AuthModal() {
const session = useContext(SessionContext); 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"> <label className="modal-box flex max-w-sm flex-col gap-4 pt-2">
{session?.user?.id && typeof session.user.id === "number" ? ( {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="flex w-full justify-between">
<div className="div"> <div>
Logged in as <b>{session.user.name}</b> Logged in as <b>{session.user.name}</b>
</div> </div>
<a className="link" onClick={clickLogout}> <a className="link" onClick={clickLogout}>
Logout Logout
</a> </a>
</div> </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"> <div className="modal-action">
<label htmlFor="auth-modal" className="btn"> <label htmlFor="auth-modal" className="btn">