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 "./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 }) {
|
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<html>
|
<html>
|
||||||
<head />
|
<head />
|
||||||
<body>
|
<body>
|
||||||
<header className="navbar mx-1 w-auto justify-center drop-shadow-sm md:mx-16 lg:mx-40">
|
<Navbar />
|
||||||
<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>
|
|
||||||
<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">
|
<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}
|
{children}
|
||||||
</main>
|
</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">
|
<Footer />
|
||||||
<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>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,52 +1,10 @@
|
|||||||
import { IconRefresh } from "@tabler/icons-react";
|
import PublicGames from "./PublicGames";
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="flex w-full flex-wrap items-center justify-evenly gap-4 px-4 py-10 lg:gap-0">
|
<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">
|
<PublicGames />
|
||||||
<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>
|
|
||||||
<div className="flex flex-col items-center">
|
<div className="flex flex-col items-center">
|
||||||
<h2 className="mb-4 text-xl font-bold leading-tight">Join from invite</h2>
|
<h2 className="mb-4 text-xl font-bold leading-tight">Join from invite</h2>
|
||||||
<div className="form-control">
|
<div className="form-control">
|
||||||
|
|||||||
Reference in New Issue
Block a user