move components to separate folder

client/src/app/Footer.tsx

@@ -1,27 +0,0 @@
-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>
-          &copy; 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>
-  );
-}

client/src/app/Navbar.tsx

@@ -1,48 +0,0 @@
-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 mt-1">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>
-  );
-}

client/src/app/PublicGames.tsx

@@ -1,51 +0,0 @@
-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>
-  );
-}

client/src/app/layout.tsx

@@ -1,7 +1,7 @@
 import "./globals.css";
 
-import Navbar from "./Navbar";
-import Footer from "./Footer";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (

client/src/app/page.tsx

@@ -1,4 +1,4 @@
-import PublicGames from "./PublicGames";
+import PublicGames from "@/components/PublicGames";
 
 export default function Home() {
   return (