separate into more components

This commit is contained in:
Nathaniel Tampus
2023-02-20 17:36:30 +08:00
parent 13c7515a26
commit c6be8f0776
5 changed files with 135 additions and 108 deletions

View File

@@ -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">