general layout improvements

This commit is contained in:
Nathaniel Tampus
2023-03-02 17:53:35 +08:00
parent e562d53e06
commit 181738ae3f
2 changed files with 72 additions and 44 deletions

View File

@@ -2,35 +2,44 @@ import PublicGames from "@/components/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="bg-base-200 flex w-full flex-wrap items-center justify-evenly gap-4 rounded-xl px-4 py-10 shadow-md lg:gap-0">
<PublicGames />
<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">
<div className="input-group">
<input type="text" placeholder="Invite link or code" className="input input-bordered" />
<button className="btn btn-square">Join</button>
<div className="flex flex-col items-center gap-4">
<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">
<div className="input-group">
<input
type="text"
placeholder="Invite link or code"
className="input input-bordered"
/>
<button className="btn btn-square">Join</button>
</div>
</div>
</div>
<div className="divider divider-vertical">or</div>
<h2 className="mb-4 text-xl font-bold leading-tight">Create game</h2>
<div className="form-control">
<label className="label cursor-pointer">
<span className="label-text">Unlisted/invite-only</span>
<input type="checkbox" className="checkbox" />
</label>
<label className="label">
<span className="label-text">Select your side</span>
</label>
<div className="input-group">
<select className="select select-bordered">
<option value="random">Random</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<button className="btn">Create</button>
<div className="flex flex-col items-center">
<h2 className="mb-4 text-xl font-bold leading-tight">Create game</h2>
<div className="form-control">
<label className="label cursor-pointer">
<span className="label-text">Unlisted/invite-only</span>
<input type="checkbox" className="checkbox" />
</label>
<label className="label">
<span className="label-text">Select your side</span>
</label>
<div className="input-group">
<select className="select select-bordered">
<option value="random">Random</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
<button className="btn">Create</button>
</div>
</div>
</div>
</div>