добавил ветку main-page

2025-11-20 15:42:09 +03:00
1 parent 1fe3ba2ba5
commit 8dc704c466
@@ -0,0 +1,69 @@
+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;