You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
61 lines
1.6 KiB
61 lines
1.6 KiB
import { Button } from "antd";
|
|
import { twMerge } from "tailwind-merge";
|
|
import { Title } from "../../components/Title";
|
|
import { useFilters } from "../../stores/useFilters";
|
|
import { CATEGORIES } from "../../config";
|
|
|
|
const SelectItem = ({ name, isActive, onClick, disabled }) => {
|
|
return (
|
|
<Button
|
|
block
|
|
type="text"
|
|
className={twMerge(
|
|
"text-left",
|
|
isActive && "bg-blue hover:bg-blue active:bg-blue focus:bg-blue"
|
|
)}
|
|
onClick={onClick}
|
|
disabled={disabled}
|
|
>
|
|
{name}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
export const CategoriesSelect = ({ disabled }) => {
|
|
const { filters, setCategories } = useFilters();
|
|
|
|
const handleClick = (category) => setCategories(category);
|
|
|
|
const clear = () => setCategories([]);
|
|
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-1">
|
|
<Title text={"Категория объекта размещения"} />
|
|
{filters.categories.length !== 0 && (
|
|
<Button
|
|
type="text"
|
|
className="text-grey text-xs p-0 hover:bg-transparent active:bg-transparent focus:bg-transparent h-fit"
|
|
onClick={clear}
|
|
disabled={disabled}
|
|
>
|
|
сбросить
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
{Object.entries(CATEGORIES).map(([key, value]) => (
|
|
<SelectItem
|
|
key={key}
|
|
name={value}
|
|
isActive={filters.categories.includes(value)}
|
|
onClick={() => handleClick(value)}
|
|
disabled={disabled}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|