MrDiderot/Michess
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

use modal for auth nav button

Browse Source
This commit is contained in:
Nathaniel Tampus
2023-03-02 17:53:13 +08:00
parent 3d3e7651e7
commit e562d53e06
3 changed files with 52 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/src/app/layout.tsx
View File

@@ -2,6 +2,7 @@ import "@/styles/globals.css";
import Navbar from "@/components/Navbar"; import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer"; import Footer from "@/components/Footer";
import AuthModal from "@/components/AuthModal";
export const metadata = { export const metadata = {
title: "chessu", title: "chessu",
@@ -14,11 +15,12 @@ export default function RootLayout({ children }: { children: React.ReactNode })
<body> <body>
<Navbar /> <Navbar />
<main className="bg-base-200 mx-1 flex min-h-[70vh] justify-center rounded-3xl shadow-md md:mx-16 lg:mx-40"> <main className="mx-1 flex min-h-[70vh] justify-center md:mx-16 lg:mx-40">{children}</main>
{children}
</main>
<Footer /> <Footer />
{/* auth modal, put in separate component */}
<AuthModal />
</body> </body>
</html> </html>
); );

42
client/src/components/AuthModal.tsx Normal file
View File

@@ -0,0 +1,42 @@
export default function AuthModal() {
return (
<>
<input type="checkbox" id="auth-modal" className="modal-toggle" />
<label htmlFor="auth-modal" className="modal">
<label className="modal-box flex flex-col gap-4 pt-2">
<div className="flex w-full gap-2">
<div className="tabs flex-grow">
<a className="tab tab-bordered tab-active flex-grow">Guest</a>
<a className="tab tab-bordered tab-disabled flex-grow">Login</a>
<a className="tab tab-bordered tab-disabled flex-grow">Register</a>
</div>
<label htmlFor="auth-modal" className="btn btn-sm btn-circle btn-ghost">
✕
</label>
</div>
<div className="flex flex-col">
<div className="form-control">
<label className="label">
<span className="label-text">Update guest name</span>
</label>
<label className="input-group">
<span>Name</span>
<input
type="text"
placeholder="Enter name here..."
className="input input-bordered flex-grow"
/>
</label>
</div>
<div className="modal-action">
<label htmlFor="auth-modal" className="btn">
Confirm
</label>
</div>
</div>
</label>
</label>
</>
);
}

22
client/src/components/Navbar.tsx
View File

@@ -17,31 +17,11 @@ export default function Navbar() {
<div className="btn btn-ghost btn-circle"> <div className="btn btn-ghost btn-circle">
<IconSun className="m-auto block h-full" /> <IconSun className="m-auto block h-full" />
</div> </div>
<div className="dropdown dropdown-end"> <label tabIndex={0} htmlFor="auth-modal" className="btn btn-ghost btn-circle avatar">
{/* ^ wrap this in client component too */}
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
<div className="w-10 rounded-full"> <div className="w-10 rounded-full">
<IconUser className="m-auto block h-full" /> <IconUser className="m-auto block h-full" />
</div> </div>
</label> </label>
<ul
tabIndex={0}
className="menu menu-compact dropdown-content rounded-box bg-base-100 w-52 p-2 shadow"
>
<li>
<a>Change guest name</a>
</li>
<li>
<a className="pointer-events-none justify-between">
Sign in
<span className="badge">WIP</span>
</a>
</li>
<li>
<a className="pointer-events-none">Register</a>
</li>
</ul>
</div>
</div> </div>
</header> </header>
); );