diff options
| -rw-r--r-- | frontend/app/components/NavigateLink.tsx | 10 | ||||
| -rw-r--r-- | frontend/app/routes/_index.tsx | 9 | ||||
| -rw-r--r-- | frontend/app/routes/dashboard.tsx | 81 |
3 files changed, 56 insertions, 44 deletions
diff --git a/frontend/app/components/NavigateLink.tsx b/frontend/app/components/NavigateLink.tsx new file mode 100644 index 0000000..a94d774 --- /dev/null +++ b/frontend/app/components/NavigateLink.tsx @@ -0,0 +1,10 @@ +import { Link, LinkProps } from "@remix-run/react"; + +export default function NavigateLink(props: LinkProps) { + return ( + <Link + {...props} + className="text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500" + /> + ); +} diff --git a/frontend/app/routes/_index.tsx b/frontend/app/routes/_index.tsx index 9f9c2bb..9be594f 100644 --- a/frontend/app/routes/_index.tsx +++ b/frontend/app/routes/_index.tsx @@ -1,8 +1,8 @@ import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; -import { Link } from "@remix-run/react"; import "@fortawesome/fontawesome-svg-core/styles.css"; import { ensureUserNotLoggedIn } from "../.server/auth"; import BorderedContainer from "../components/BorderedContainer"; +import NavigateLink from "../components/NavigateLink"; export const meta: MetaFunction = () => [ { title: "iOSDC Japan 2024 Albatross.swift" }, @@ -40,12 +40,7 @@ export default function Index() { </BorderedContainer> </div> <div> - <Link - to="/login" - className="text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500" - > - ログイン - </Link> + <NavigateLink to="/login">ログイン</NavigateLink> </div> </div> ); diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx index 37dafff..6b242c4 100644 --- a/frontend/app/routes/dashboard.tsx +++ b/frontend/app/routes/dashboard.tsx @@ -1,8 +1,10 @@ import type { LoaderFunctionArgs, MetaFunction } from "@remix-run/node"; import { redirect } from "@remix-run/node"; -import { Form, Link, useLoaderData } from "@remix-run/react"; +import { Form, useLoaderData } from "@remix-run/react"; import { apiGetGames } from "../.server/api/client"; import { ensureUserLoggedIn } from "../.server/auth"; +import BorderedContainer from "../components/BorderedContainer"; +import NavigateLink from "../components/NavigateLink"; export const meta: MetaFunction = () => [ { title: "Dashboard | iOSDC Japan 2024 Albatross.swift" }, @@ -28,48 +30,53 @@ export default function Dashboard() { const { user, games } = useLoaderData<typeof loader>()!; return ( - <div className="min-h-screen p-8"> - <div className="p-6 rounded shadow-md max-w-4xl mx-auto"> - <h1 className="text-3xl font-bold mb-4">{user.username}</h1> - <h2 className="text-2xl font-semibold mb-2">User</h2> - <div className="mb-6"> - <ul className="list-disc list-inside"> - <li>Name: {user.display_name}</li> - </ul> - </div> - <h2 className="text-2xl font-semibold mb-2">Games</h2> - <div> - <ul className="list-disc list-inside"> + <div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center"> + <h1 className="text-2xl font-bold mb-4 text-gray-800"> + <span>{user.display_name}</span> + <span className="text-gray-500 ml-2">@{user.username}</span> + </h1> + <h2 className="text-xl font-semibold mb-4 text-gray-700">試合</h2> + <BorderedContainer> + <div className="px-4"> + <ul className="divide-y"> {games.map((game) => ( - <li key={game.game_id}> - {game.display_name} - {game.game_type === "multiplayer" ? " (Multiplayer)" : " (1v1)"} - {game.state === "closed" || game.state === "finished" ? ( - <span className="inline-block px-6 py-2 text-gray-400 bg-gray-200 cursor-not-allowed rounded"> - Entry + <li + key={game.game_id} + className="flex justify-between items-center py-3 gap-3" + > + <div> + <span className="font-medium text-gray-800"> + {game.display_name} </span> - ) : ( - <Link - to={`/golf/${game.game_id}/play`} - className="inline-block px-6 py-2 text-white bg-blue-500 hover:bg-blue-700 rounded" - > - Entry - </Link> - )} + <span className="text-sm text-gray-500 ml-2"> + {game.game_type === "multiplayer" ? " (マルチ)" : " (1v1)"} + </span> + </div> + <span> + {game.state === "closed" || game.state === "finished" ? ( + <span className="text-lg text-gray-400 bg-gray-200 px-4 py-2 rounded"> + 入室 + </span> + ) : ( + <NavigateLink to={`/golf/${game.game_id}/play`}> + 入室 + </NavigateLink> + )} + </span> </li> ))} </ul> </div> - <div> - <Form method="post" action="/logout"> - <button - className="mt-6 px-6 py-2 text-white bg-red-500 hover:bg-red-700 rounded" - type="submit" - > - Logout - </button> - </Form> - </div> + </BorderedContainer> + <div className="mt-6"> + <Form method="post" action="/logout"> + <button + type="submit" + className="px-4 py-2 bg-red-500 text-white rounded transition duration-300 hover:bg-red-700 focus:ring focus:ring-red-400 focus:outline-none" + > + ログアウト + </button> + </Form> </div> </div> ); |