init remix app

client/app/components/Footer.tsx

@@ -0,0 +1,4 @@
+const Footer = () => {
+  return <div>Footer</div>;
+};
+export default Footer;

client/app/components/Header.tsx

@@ -0,0 +1,44 @@
+import { Link } from "@remix-run/react";
+
+const Header = () => {
+  return (
+    <header className="relative flex flex-col items-start justify-between bg-slate-700 sm:flex-row sm:items-center">
+      <h1 className="z-10 m-2.5 text-2xl">chessu</h1>
+      <input className="peer" type="checkbox" id="menu" hidden />
+      <label
+        htmlFor="menu"
+        className="absolute right-0 p-5 sm:hidden peer-checked:[&_div:first-child]:translate-y-1.5 peer-checked:[&_div:first-child]:rotate-45 peer-checked:[&_div:last-child]:-translate-y-1 peer-checked:[&_div:last-child]:-rotate-45"
+      >
+        <div
+          aria-hidden="true"
+          className="m-auto h-0.5 w-6 rounded bg-blue-500 transition duration-300"
+        ></div>
+        <div
+          aria-hidden="true"
+          className="m-auto mt-2 h-0.5 w-6 rounded bg-blue-500 transition duration-300"
+        ></div>
+      </label>
+      <div className="fixed flex h-full w-[calc(100%-4rem)] translate-x-[-100%] flex-col items-center bg-inherit pt-16 shadow-lg transition duration-300 peer-checked:translate-x-0 sm:static sm:flex sm:w-auto sm:translate-x-0 sm:flex-row sm:bg-inherit sm:pt-0 [&_a]:block [&_a]:text-center hover:[&_a]:bg-blue-500">
+        <nav className="w-full sm:w-auto">
+          <ul className="flex flex-col sm:flex-row">
+            <li>
+              <Link className="p-5" to="/">
+                Play
+              </Link>
+            </li>
+            <li>
+              <Link className="p-5" to="/games">
+                Watch
+              </Link>
+            </li>
+          </ul>
+        </nav>
+        <div className="flex w-full items-center sm:w-auto">
+          <button className="w-full p-5 sm:w-auto">themebtn</button>
+          <button className="w-full p-5 sm:w-auto">Sign in</button>
+        </div>
+      </div>
+    </header>
+  );
+};
+export default Header;

client/app/components/game/Board.tsx

@@ -0,0 +1,10 @@
+import { Chessboard } from "react-chessboard";
+
+const Board = () => {
+  return (
+    <div>
+      <Chessboard />
+    </div>
+  );
+};
+export default Board;