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

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

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

@ -107,6 +107,10 @@ export default function RankingGlobal() {
<Spinner />
</div>
) : (
<div className="flex flex-col gap-2">
<div className="flex items-center gap-2 rounded-md bg-gray-700 p-2">
<p>You are viewing Global scores</p>
</div>
<table className="w-full table-auto border-spacing-2 border-none text-left">
<thead>
<tr>
@ -126,6 +130,7 @@ export default function RankingGlobal() {
))}
</tbody>
</table>
</div>
)}
{/* Pagination */}