Fascinated/scoresaber-reloaded-v2
1
2
Fork 0
Code Issues 1 Pull Requests 10 Actions Activity

added header to show what you are viewing
All checks were successful
deploy / deploy (push) Successful in 59s
Details

Browse Source
This commit is contained in:
Lee 2023-10-22 06:18:49 +01:00
parent cff29d1c14
commit 21cb7aaf89
2 changed files with 54 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/app/ranking/country/[country]/page.tsx
View File

@ -10,6 +10,7 @@ import { ScoresaberPlayer } from "@/schemas/scoresaber/player";
import { fetchTopPlayers } from "@/utils/scoresaber/api"; import { fetchTopPlayers } from "@/utils/scoresaber/api";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import ReactCountryFlag from "react-country-flag";
type PageInfo = { type PageInfo = {
loading: boolean; loading: boolean;
@ -81,7 +82,7 @@ export default function RankingCountry({
if (!pageInfo.loading || error) return; if (!pageInfo.loading || error) return;
updatePage(pageInfo.page); updatePage(pageInfo.page);
}, [error, params.country, updatePage, pageInfo.page, pageInfo.loading]); }, [error, country, updatePage, pageInfo.page, pageInfo.loading]);
if (pageInfo.loading || error) { if (pageInfo.loading || error) {
return ( return (
@ -113,25 +114,36 @@ export default function RankingCountry({
<Spinner /> <Spinner />
</div> </div>
) : ( ) : (
<table className="w-full table-auto border-spacing-2 border-none text-left"> <div className="flex flex-col gap-2">
<thead> <div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
<tr> <ReactCountryFlag
<th className="px-4 py-2">Rank</th> countryCode={country}
<th className="px-4 py-2">Profile</th> svg
<th className="px-4 py-2">Performance Points</th> className="!h-8 !w-8"
<th className="px-4 py-2">Total Plays</th> />
<th className="px-4 py-2">Total Ranked Plays</th> <p>You are viewing scores from {country}</p>
<th className="px-4 py-2">Avg Ranked Accuracy</th> </div>
</tr>
</thead> <table className="w-full table-auto border-spacing-2 border-none text-left">
<tbody className="border-none"> <thead>
{players.map((player) => ( <tr>
<tr key={player.rank} className="border-b border-gray-700"> <th className="px-4 py-2">Rank</th>
<PlayerRanking player={player} /> <th className="px-4 py-2">Profile</th>
<th className="px-4 py-2">Performance Points</th>
<th className="px-4 py-2">Total Plays</th>
<th className="px-4 py-2">Total Ranked Plays</th>
<th className="px-4 py-2">Avg Ranked Accuracy</th>
</tr> </tr>
))} </thead>
</tbody> <tbody className="border-none">
</table> {players.map((player) => (
<tr key={player.rank} className="border-b border-gray-700">
<PlayerRanking player={player} />
</tr>
))}
</tbody>
</table>
</div>
)} )}
{/* Pagination */} {/* Pagination */}

41
src/app/ranking/global/page.tsx
View File

@ -107,25 +107,30 @@ export default function RankingGlobal() {
<Spinner /> <Spinner />
</div> </div>
) : ( ) : (
<table className="w-full table-auto border-spacing-2 border-none text-left"> <div className="flex flex-col gap-2">
<thead> <div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
<tr> <p>You are viewing Global scores</p>
<th className="px-4 py-2">Rank</th> </div>
<th className="px-4 py-2">Profile</th> <table className="w-full table-auto border-spacing-2 border-none text-left">
<th className="px-4 py-2">Performance Points</th> <thead>
<th className="px-4 py-2">Total Plays</th> <tr>
<th className="px-4 py-2">Total Ranked Plays</th> <th className="px-4 py-2">Rank</th>
<th className="px-4 py-2">Avg Ranked Accuracy</th> <th className="px-4 py-2">Profile</th>
</tr> <th className="px-4 py-2">Performance Points</th>
</thead> <th className="px-4 py-2">Total Plays</th>
<tbody className="border-none"> <th className="px-4 py-2">Total Ranked Plays</th>
{players.map((player) => ( <th className="px-4 py-2">Avg Ranked Accuracy</th>
<tr key={player.rank} className="border-b border-gray-700">
<PlayerRanking player={player} />
</tr> </tr>
))} </thead>
</tbody> <tbody className="border-none">
</table> {players.map((player) => (
<tr key={player.rank} className="border-b border-gray-700">
<PlayerRanking player={player} />
</tr>
))}
</tbody>
</table>
</div>
)} )}
{/* Pagination */} {/* Pagination */}