diff options
| author | nsfisis <nsfisis@gmail.com> | 2025-03-16 00:09:32 +0900 |
|---|---|---|
| committer | nsfisis <nsfisis@gmail.com> | 2025-03-16 00:09:32 +0900 |
| commit | 42c6c97f0230c0969a87e601be1ee740bd017aa5 (patch) | |
| tree | 76d55cb87a5f35779136431660398748a2c1124c /frontend/app | |
| parent | af2d6093e2987ccc597f0be1e97a451858fee933 (diff) | |
| download | phperkaigi-2025-albatross-42c6c97f0230c0969a87e601be1ee740bd017aa5.tar.gz phperkaigi-2025-albatross-42c6c97f0230c0969a87e601be1ee740bd017aa5.tar.zst phperkaigi-2025-albatross-42c6c97f0230c0969a87e601be1ee740bd017aa5.zip | |
feat(frontend): enhance ranking table design
Diffstat (limited to 'frontend/app')
| -rw-r--r-- | frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx | 88 | ||||
| -rw-r--r-- | frontend/app/components/UserLabel.tsx | 11 |
2 files changed, 43 insertions, 56 deletions
diff --git a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx index 708c4a8..a2b2d21 100644 --- a/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx +++ b/frontend/app/components/GolfWatchApps/GolfWatchAppGamingMultiplayer.tsx @@ -3,7 +3,6 @@ import type { components } from "../../api/schema"; import { gamingLeftTimeSecondsAtom } from "../../states/watch"; import LeftTime from "../Gaming/LeftTime"; import Problem from "../Gaming/Problem"; -import UserLabel from "../UserLabel"; type RankingEntry = components["schemas"]["RankingEntry"]; @@ -40,51 +39,50 @@ export default function GolfWatchAppGamingMultiplayer({ description={problemDescription} sampleCode={sampleCode} /> - <div> - <table className="min-w-full divide-y divide-gray-200"> - <thead className="bg-gray-50"> - <tr> - <th - scope="col" - className="px-6 py-3 text-left font-medium text-gray-800 uppercase tracking-wider" - > - 順位 - </th> - <th - scope="col" - className="px-6 py-3 text-left font-medium text-gray-800 uppercase tracking-wider" - > - 名前 - </th> - <th - scope="col" - className="px-6 py-3 text-left font-medium text-gray-800 uppercase tracking-wider" - > - スコア - </th> - </tr> - </thead> - <tbody className="bg-white divide-y divide-gray-200"> - {ranking.map((entry, index) => ( - <tr key={entry.player.user_id}> - <td className="px-6 py-4 whitespace-nowrap text-gray-900"> - {index + 1} - </td> - <td className="px-6 py-4 whitespace-nowrap text-gray-900"> - {entry.player.display_name} - {entry.player.label && ( - <span className="mx-2"> - <UserLabel label={entry.player.label} /> - </span> - )} - </td> - <td className="px-6 py-4 whitespace-nowrap text-gray-900"> - {entry.score} - </td> + <div className="p-4 flex flex-col gap-4"> + <div className="text-center text-xl font-bold">順位表</div> + <div className="overflow-hidden border-2 border-blue-600 rounded-xl"> + <table className="min-w-full divide-y divide-gray-400 border-collapse"> + <thead className="bg-gray-50"> + <tr> + <th + scope="col" + className="px-6 py-3 text-left font-medium text-gray-800" + > + 順位 + </th> + <th + scope="col" + className="px-6 py-3 text-left font-medium text-gray-800" + > + プレイヤー + </th> + <th + scope="col" + className="px-6 py-3 text-left font-medium text-gray-800" + > + スコア + </th> </tr> - ))} - </tbody> - </table> + </thead> + <tbody className="bg-white divide-y divide-gray-300"> + {ranking.map((entry, index) => ( + <tr key={entry.player.user_id}> + <td className="px-6 py-4 whitespace-nowrap text-gray-900"> + {index + 1} + </td> + <td className="px-6 py-4 whitespace-nowrap text-gray-900"> + {entry.player.display_name} + {entry.player.label && ` (${entry.player.label})`} + </td> + <td className="px-6 py-4 whitespace-nowrap text-gray-900"> + {entry.score} + </td> + </tr> + ))} + </tbody> + </table> + </div> </div> </div> </div> diff --git a/frontend/app/components/UserLabel.tsx b/frontend/app/components/UserLabel.tsx deleted file mode 100644 index 16ef4d4..0000000 --- a/frontend/app/components/UserLabel.tsx +++ /dev/null @@ -1,11 +0,0 @@ -type Props = { - label: string; -}; - -export default function UserLabel({ label }: Props) { - return ( - <span className="bg-sky-600 text-sky-50 rounded-lg p-3 text-sm"> - {label} - </span> - ); -} |