From e3502d9e649fe61bb0ba4046b2c23c0d78bc92e9 Mon Sep 17 00:00:00 2001
From: nsfisis <nsfisis@gmail.com>
Date: Sun, 11 Aug 2024 20:17:25 +0900
Subject: feat(frontend): tweak dashboard style

---
 frontend/app/components/NavigateLink.tsx |  2 +-
 frontend/app/routes/dashboard.tsx        | 60 ++++++++++++++++++--------------
 2 files changed, 34 insertions(+), 28 deletions(-)

(limited to 'frontend')

diff --git a/frontend/app/components/NavigateLink.tsx b/frontend/app/components/NavigateLink.tsx
index a94d774..b749cea 100644
--- a/frontend/app/components/NavigateLink.tsx
+++ b/frontend/app/components/NavigateLink.tsx
@@ -4,7 +4,7 @@ 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"
+			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"
 		/>
 	);
 }
diff --git a/frontend/app/routes/dashboard.tsx b/frontend/app/routes/dashboard.tsx
index ec01a1c..4c751d9 100644
--- a/frontend/app/routes/dashboard.tsx
+++ b/frontend/app/routes/dashboard.tsx
@@ -38,34 +38,40 @@ export default function Dashboard() {
 			<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}
-								className="flex justify-between items-center py-3 gap-3"
-							>
-								<div>
-									<span className="font-medium text-gray-800">
-										{game.display_name}
-									</span>
-									<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">
-											入室
+					{games.length === 0 ? (
+						<p>エントリーしている試合はありません</p>
+					) : (
+						<ul className="divide-y">
+							{games.map((game) => (
+								<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>
-									) : (
-										<NavigateLink to={`/golf/${game.game_id}/play`}>
-											入室
-										</NavigateLink>
-									)}
-								</span>
-							</li>
-						))}
-					</ul>
+										<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>
 			</BorderedContainer>
 			<div className="mt-6">
-- 
cgit v1.2.3-70-g09d2