diff options
Diffstat (limited to 'frontend/app/routes/dashboard.tsx')
| -rw-r--r-- | frontend/app/routes/dashboard.tsx | 39 |
1 files changed, 17 insertions, 22 deletions
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx index 7aa77fd..3a50757 100644 --- a/frontend/app/routes/dashboard.tsx +++ b/frontend/app/routes/dashboard.tsx @@ -4,6 +4,7 @@ import { apiGetGames } from "../.server/api/client"; import { ensureUserLoggedIn } from "../.server/auth"; import BorderedContainer from "../components/BorderedContainer"; import NavigateLink from "../components/NavigateLink"; +import UserIcon from "../components/UserIcon"; export const meta: MetaFunction = () => [ { title: "Dashboard | iOSDC Japan 2024 Albatross.swift" }, @@ -22,23 +23,19 @@ export default function Dashboard() { const { user, games } = useLoaderData<typeof loader>()!; return ( - <div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center"> + <div className="p-6 bg-gray-100 min-h-screen flex flex-col items-center gap-4"> {user.icon_path && ( - <img - src={ - process.env.NODE_ENV === "development" - ? `http://localhost:8002/iosdc-japan/2024/code-battle${user.icon_path}` - : `/iosdc-japan/2024/code-battle${user.icon_path}` - } - alt={`${user.display_name} のアイコン`} - className="w-24 h-24 rounded-full mb-4" + <UserIcon + iconPath={user.icon_path} + displayName={user.display_name} + className="w-24 h-24" /> )} - <h1 className="text-2xl font-bold mb-4"> + <h1 className="text-2xl font-bold"> <span className="text-gray-800">{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> + <h2 className="text-xl font-semibold text-gray-700">試合</h2> <BorderedContainer> <div className="px-4"> {games.length === 0 ? ( @@ -77,16 +74,14 @@ export default function Dashboard() { )} </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> + <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> {user.is_admin && ( <a href={ @@ -94,7 +89,7 @@ export default function Dashboard() { ? "http://localhost:8002/iosdc-japan/2024/code-battle/admin/dashboard" : "/iosdc-japan/2024/code-battle/admin/dashboard" } - className="mt-4 text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500 focus:ring focus:ring-pink-400 focus:outline-none" + className="text-lg text-white bg-pink-600 px-4 py-2 rounded transition duration-300 hover:bg-pink-500 focus:ring focus:ring-pink-400 focus:outline-none" > Admin Dashboard </a> |