43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
import { SingleRankingsParams } from "../../api/rankings";
|
|
|
|
const positions = ["Goalkeeper", "Defender", "Midfielder", "Forward"];
|
|
|
|
interface PositionSelectProps {
|
|
params: SingleRankingsParams;
|
|
setParams: (params: SingleRankingsParams) => void;
|
|
}
|
|
|
|
export default function PositionSelect({
|
|
params,
|
|
setParams,
|
|
}: PositionSelectProps) {
|
|
const handlePositionChange = (position: string) => {
|
|
setParams({
|
|
...params,
|
|
position,
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div className="flex border-2 border-gray-300 rounded-xl overflow-hidden">
|
|
{positions.map((position, index) => (
|
|
<div
|
|
key={position}
|
|
className={`flex-auto ${index > 0 ? "border-l-2 border-gray-300" : ""}`}
|
|
>
|
|
<button
|
|
className={`w-full py-1 px-3 ${
|
|
params.position === position
|
|
? "bg-primary-blue-500 hover:bg-primary-blue-700 text-white"
|
|
: "bg-white hover:bg-neutral-100 text-neutral-800"
|
|
}`}
|
|
onClick={() => handlePositionChange(position)}
|
|
>
|
|
{position}
|
|
</button>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|