47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { formatNumber } from "@/utils/numberUtils";
|
||
|
|
import { calcPpBoundary } from "@/utils/scoresaber/scores";
|
||
|
|
import { useState } from "react";
|
||
|
|
import Label from "../Label";
|
||
|
|
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
|
||
|
|
import { Slider } from "../ui/slider";
|
||
|
|
|
||
|
|
type PPGainLabelProps = {
|
||
|
|
playerId: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function PPGainLabel({ playerId }: PPGainLabelProps) {
|
||
|
|
const [ppBoundary, setPpBoundary] = useState(1);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Popover>
|
||
|
|
<PopoverTrigger>
|
||
|
|
<Label
|
||
|
|
title={`+ ${ppBoundary}pp`}
|
||
|
|
className="bg-pp-blue hover:cursor-pointer"
|
||
|
|
tooltip={
|
||
|
|
<p>
|
||
|
|
Amount of raw pp required to increase your global pp by{" "}
|
||
|
|
{ppBoundary}pp
|
||
|
|
</p>
|
||
|
|
}
|
||
|
|
value={`${formatNumber(
|
||
|
|
calcPpBoundary(playerId, ppBoundary)?.toFixed(2),
|
||
|
|
)}pp`}
|
||
|
|
/>
|
||
|
|
</PopoverTrigger>
|
||
|
|
<PopoverContent className="flex flex-col gap-4" align="start">
|
||
|
|
<p>Global PP Gain +{ppBoundary} pp</p>
|
||
|
|
<Slider
|
||
|
|
defaultValue={[1]}
|
||
|
|
min={1}
|
||
|
|
max={100}
|
||
|
|
step={1}
|
||
|
|
onValueChange={(value) => setPpBoundary(value[0])}
|
||
|
|
/>
|
||
|
|
</PopoverContent>
|
||
|
|
</Popover>
|
||
|
|
);
|
||
|
|
}
|