48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
/* eslint-disable react-hooks/exhaustive-deps */
|
|
import { useEffect, useState } from "react";
|
|
import clsx from "clsx";
|
|
|
|
function UnitTypesSelect({
|
|
unitTypes,
|
|
onSelect,
|
|
defaultSelected = [],
|
|
}: {
|
|
unitTypes: string[];
|
|
onSelect: (unitTypes: string[]) => void;
|
|
defaultSelected: string[];
|
|
}) {
|
|
const [selectedUnitTypes, setSelectedUnitTypes] =
|
|
useState<string[]>(defaultSelected);
|
|
|
|
useEffect(() => setSelectedUnitTypes(defaultSelected), [defaultSelected]);
|
|
|
|
useEffect(() => onSelect(selectedUnitTypes), [selectedUnitTypes]);
|
|
|
|
return (
|
|
<div className="flex 2xl:gap-[0.556vw] gap-2">
|
|
{unitTypes.map((unitType) => (
|
|
<p
|
|
key={unitType}
|
|
onClick={() => {
|
|
setSelectedUnitTypes((prev) =>
|
|
prev.includes(unitType)
|
|
? prev.filter((type) => type !== unitType)
|
|
: [...prev, unitType]
|
|
);
|
|
}}
|
|
className={clsx(
|
|
"2xl:px-[1.389vw] 2xl:py-[0.833vw] px-5 py-3 2xl:rounded-[2.778vw] rounded-[40px] 2xl:ring-[0.069vw] ring transition-[box-shadow] cursor-pointer text-s",
|
|
selectedUnitTypes.includes(unitType)
|
|
? "ring-[#00BED7]"
|
|
: "ring-[#E2E2DC] text-[#0D1922]/70"
|
|
)}
|
|
>
|
|
{unitType}
|
|
</p>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default UnitTypesSelect;
|