69 lines
2.3 KiB
TypeScript
69 lines
2.3 KiB
TypeScript
import React from "react";
|
||
import { useDispatch } from "react-redux";
|
||
import { setFilter, applyFilters } from "./catalogSlice";
|
||
import styles from "./Catalog.module.css";
|
||
import type { Category } from "../../types/categories";
|
||
import type { CategoryAtributes } from "../../types/categories";
|
||
import type { CategoryAtrVals } from "../../types/categories";
|
||
|
||
interface Props{
|
||
categories: Category[];
|
||
atributes: CategoryAtributes[]
|
||
atrVals: CategoryAtrVals[];
|
||
}
|
||
|
||
const CatalogSidebar: React.FC<Props> = ({categories, atributes, atrVals}) => {
|
||
const dispatch = useDispatch();
|
||
|
||
const handleFilterChange = (name: string, value: string) => {
|
||
dispatch(setFilter({ name, value }));
|
||
dispatch(applyFilters());
|
||
};
|
||
|
||
return (
|
||
<aside className={styles.sidebar}>
|
||
<h3>ПАРАМЕТРЫ</h3>
|
||
<div className={styles.filterGroup}>
|
||
<p>размер:</p>
|
||
{atributes.map((a) => (
|
||
<>
|
||
<p>{a.name}</p>
|
||
{atrVals.map((b) => (
|
||
<label>
|
||
<input type="checkbox" onChange={() => handleFilterChange(`${a.name}`, `${b.val}`)} /> <p>{b.val}</p>
|
||
</label>
|
||
))}
|
||
</>
|
||
))}
|
||
|
||
|
||
<label>
|
||
<input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х500")} /> 110х2,2х500
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1000")} /> 110х2,2х1000
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х1500")} /> 110х2,2х1500
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х2000")} /> 110х2,2х2000
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" onChange={() => handleFilterChange("size", "110х2,2х3000")} /> 110х2,2х3000
|
||
</label>
|
||
</div>
|
||
<div className={styles.filterGroup}>
|
||
<p>Форма выпуска:</p>
|
||
<label>
|
||
<input type="checkbox" onChange={() => handleFilterChange("form", "Наборы")} /> Наборы
|
||
</label>
|
||
<label>
|
||
<input type="checkbox" onChange={() => handleFilterChange("form", "Поштучно")} /> Поштучно
|
||
</label>
|
||
</div>
|
||
</aside>
|
||
);
|
||
};
|
||
|
||
export default CatalogSidebar; |