42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import ky from "ky";
|
|
import Tooltip from "@/components/tooltip";
|
|
import { InformationCircleIcon } from "@heroicons/react/16/solid";
|
|
import { formatNumberWithCommas } from "@ssr/common/utils/number-utils";
|
|
import { PlayerTrackedSince } from "@ssr/common/types/player/player-tracked-since";
|
|
import ScoreSaberPlayer from "@ssr/common/types/player/impl/scoresaber-player";
|
|
import { Config } from "@ssr/common/config";
|
|
|
|
type Props = {
|
|
player: ScoreSaberPlayer;
|
|
};
|
|
|
|
export default function PlayerTrackedStatus({ player }: Props) {
|
|
const { data, isLoading, isError } = useQuery({
|
|
queryKey: ["playerIsBeingTracked", player.id],
|
|
queryFn: () => ky.get<PlayerTrackedSince>(`${Config.apiUrl}/player/tracked/${player.id}`).json(),
|
|
});
|
|
|
|
if (isLoading || isError || !data?.tracked) {
|
|
return undefined;
|
|
}
|
|
|
|
return (
|
|
<div className="flex gap-2">
|
|
<Tooltip
|
|
display={
|
|
<div className="flex flex-col justify-center items-center">
|
|
<p>This player is having their statistics tracked!</p>
|
|
<p>Days Tracked: {formatNumberWithCommas(data.daysTracked!)}</p>
|
|
</div>
|
|
}
|
|
side="bottom"
|
|
>
|
|
<InformationCircleIcon className="w-6 h-6 text-neutral-200" />
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|