separate into more components
This commit is contained in:
Nathaniel Tampus
27
client/src/app/Footer.tsx
Normal file
27
client/src/app/Footer.tsx
Normal file
@@ -0,0 +1,27 @@
|
||||
import { IconBrandGithub } from "@tabler/icons-react";
|
||||
|
||||
export default function Footer() {
|
||||
return (
|
||||
<footer className="footer text-base-content mx-1 mt-4 w-auto grid-flow-col items-center justify-between p-4 md:mx-16 lg:mx-40">
|
||||
<div className="items-center">
|
||||
<p>
|
||||
© 2023{" "}
|
||||
<a href="https://nize.ph" target="_blank" rel="noreferrer" className="link-hover">
|
||||
nize
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="items-center">
|
||||
<a
|
||||
href="https://github.com/nizewn/chessu"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn btn-ghost btn-sm gap-1 normal-case"
|
||||
>
|
||||
<IconBrandGithub className="inline-block" size={16} />
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
48
client/src/app/Navbar.tsx
Normal file
48
client/src/app/Navbar.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { IconUser, IconSun, IconMoon } from "@tabler/icons-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Navbar() {
|
||||
return (
|
||||
<header className="navbar mx-1 w-auto justify-center drop-shadow-sm md:mx-16 lg:mx-40">
|
||||
<div className="flex-1">
|
||||
<Link
|
||||
href="/"
|
||||
className="btn btn-ghost no-animation gap-1 text-xl normal-case hover:bg-transparent"
|
||||
>
|
||||
chessu
|
||||
<span className="badge badge-sm">alpha</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<div className="btn btn-ghost btn-circle">
|
||||
<IconSun className="m-auto block h-full" />
|
||||
</div>
|
||||
<div className="dropdown dropdown-end">
|
||||
{/* ^ wrap this in client component too */}
|
||||
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
|
||||
<div className="w-10 rounded-full">
|
||||
<IconUser className="m-auto block h-full" />
|
||||
</div>
|
||||
</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>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
51
client/src/app/PublicGames.tsx
Normal file
51
client/src/app/PublicGames.tsx
Normal file
@@ -0,0 +1,51 @@
|
||||
import { IconRefresh } from "@tabler/icons-react";
|
||||
|
||||
export default function PublicGames() {
|
||||
return (
|
||||
<div className="flex flex-col items-center">
|
||||
<h2 className="mb-2 text-2xl font-bold leading-tight">
|
||||
Public games{" "}
|
||||
<div className="btn btn-sm btn-ghost">
|
||||
<IconRefresh size={16} className="" />
|
||||
</div>
|
||||
</h2>
|
||||
|
||||
<div className="flex max-h-80 overflow-y-auto rounded-xl p-4">
|
||||
<table className="table-compact lg:table-normal table rounded-none">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Host</th>
|
||||
<th>Opponent</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* <tr>
|
||||
<td>(empty)</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr> */}
|
||||
<tr className="group">
|
||||
<td>sample user</td>
|
||||
<td>nize</td>
|
||||
<th>
|
||||
<button className="btn btn-ghost btn-xs focus:opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
|
||||
Join
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
|
||||
{/* invisible last row to set max column widths */}
|
||||
<tr aria-hidden="true" className="pointer-events-none opacity-0">
|
||||
<td>WPlaceholder_Text</td>
|
||||
<td>WPlaceholder_Text</td>
|
||||
<th>
|
||||
<button className="btn btn-xs">Join</button>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,77 +1,20 @@
|
||||
import "./globals.css";
|
||||
import { IconUser, IconSun, IconMoon, IconBrandGithub } from "@tabler/icons-react";
|
||||
import Link from "next/link";
|
||||
|
||||
import Navbar from "./Navbar";
|
||||
import Footer from "./Footer";
|
||||
|
||||
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<html>
|
||||
<head />
|
||||
<body>
|
||||
<header className="navbar mx-1 w-auto justify-center drop-shadow-sm md:mx-16 lg:mx-40">
|
||||
<div className="flex-1">
|
||||
<Link
|
||||
href="/"
|
||||
className="btn btn-ghost no-animation gap-1 text-xl normal-case hover:bg-transparent"
|
||||
>
|
||||
chessu
|
||||
<span className="badge badge-sm">alpha</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex-none">
|
||||
<div className="btn btn-ghost btn-circle">
|
||||
<IconSun className="m-auto block h-full" />
|
||||
</div>
|
||||
<div className="dropdown dropdown-end">
|
||||
{/* ^ wrap this in client component too */}
|
||||
<label tabIndex={0} className="btn btn-ghost btn-circle avatar">
|
||||
<div className="w-10 rounded-full">
|
||||
<IconUser className="m-auto block h-full" />
|
||||
</div>
|
||||
</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>
|
||||
</header>
|
||||
<Navbar />
|
||||
|
||||
<main className="bg-base-200 mx-1 my-8 flex min-h-[70vh] justify-center rounded-3xl shadow-md md:mx-16 lg:mx-40">
|
||||
{children}
|
||||
</main>
|
||||
<footer className="footer text-base-content mx-1 mt-4 w-auto grid-flow-col items-center justify-between p-4 md:mx-16 lg:mx-40">
|
||||
<div className="items-center">
|
||||
<p>
|
||||
© 2023{" "}
|
||||
<a href="https://nize.ph" target="_blank" rel="noreferrer" className="link-hover">
|
||||
nize
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
<div className="items-center">
|
||||
<a
|
||||
href="https://github.com/nizewn/chessu"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="btn btn-ghost btn-sm gap-1 normal-case"
|
||||
>
|
||||
<IconBrandGithub className="inline-block" size={16} />
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<Footer />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
|
||||
@@ -1,52 +1,10 @@
|
||||
import { IconRefresh } from "@tabler/icons-react";
|
||||
import PublicGames from "./PublicGames";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex w-full flex-wrap items-center justify-evenly gap-4 px-4 py-10 lg:gap-0">
|
||||
<div className="flex flex-col items-center">
|
||||
<h2 className="mb-2 text-2xl font-bold leading-tight">
|
||||
Public games{" "}
|
||||
<div className="btn btn-sm btn-ghost">
|
||||
<IconRefresh size={16} className="" />
|
||||
</div>
|
||||
</h2>
|
||||
<div className="flex max-h-80 overflow-y-auto rounded-xl p-4">
|
||||
<table className="table-compact lg:table-normal table rounded-none">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Host</th>
|
||||
<th>Opponent</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{/* <tr>
|
||||
<td>(empty)</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr> */}
|
||||
<tr className="group">
|
||||
<td>sample user</td>
|
||||
<td>nize</td>
|
||||
<th>
|
||||
<button className="btn btn-ghost btn-xs focus:opacity-100 lg:opacity-0 lg:group-hover:opacity-100">
|
||||
Join
|
||||
</button>
|
||||
</th>
|
||||
</tr>
|
||||
<PublicGames />
|
||||
|
||||
{/* invisible last row to set max column widths */}
|
||||
<tr aria-hidden="true" className="pointer-events-none opacity-0">
|
||||
<td>WPlaceholder_Text</td>
|
||||
<td>WPlaceholder_Text</td>
|
||||
<th>
|
||||
<button className="btn btn-xs">Join</button>
|
||||
</th>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex flex-col items-center">
|
||||
<h2 className="mb-4 text-xl font-bold leading-tight">Join from invite</h2>
|
||||
<div className="form-control">
|
||||
|
||||
Reference in New Issue
Block a user