.

front/src/components/Categories/Categories.tsx

@@ -3,6 +3,7 @@ import styles from "./Categories.module.css";
 import Button from "../Button/Button";
 import category_internal1 from "../../assets/images/mainPage/category_internal1.jpg"
 import category_interna2 from "../../assets/images/mainPage/category_internal2.jpg"
+import { useAppSelector, useAppDispatch } from "../../app/hooks";
 
 interface CategoryItem {
 id: number;
@@ -46,39 +47,37 @@ const handleClick = () => {
 
 return (
 <div className={styles.wrapper}>
-<h2 className={styles.header}>КАТЕГОРИИ ТОВАРОВ</h2>
+    <h2 className={styles.header}>КАТЕГОРИИ ТОВАРОВ</h2>
 
 
-<div className={styles.grid}>
+    <div className={styles.grid}>
-{categories.map((cat) => (
+        {categories.map((cat) => (
-<div
+            <div
-key={cat.id}
+                key={cat.id}
-className={`${styles.card} ${cat.highlight ? styles.highlight : ""}`}
+                className={`${styles.card} ${cat.highlight ? styles.highlight : ""}`}
->
+            >
-<img src={cat.image} className={styles.image} alt={cat.title} />
+                <img src={cat.image} className={styles.image} alt={cat.title} />
-
+                {cat.highlight && (
-
+                    <div className={styles.overlay}>
-{cat.highlight && (
+                    <h3>{cat.title}</h3>
-<div className={styles.overlay}>
+                    {cat.subtitle && <h4>{cat.subtitle}</h4>}
-<h3>{cat.title}</h3>
+                    <Button 
-{cat.subtitle && <h4>{cat.subtitle}</h4>}
-<Button 
                         label="СМОТРЕТЬ КАТАЛОГ" 
                         onClick={handleClick}
                     />
-</div>
+                    </div>
-)}
+                )}
 
 
-{!cat.highlight && (
+                    {!cat.highlight && (
-<div className={styles.titleSmall}>
+                    <div className={styles.titleSmall}>
-<span>{cat.title}</span>
+                    <span>{cat.title}</span>
-{cat.subtitle && <span>{cat.subtitle}</span>}
+                    {cat.subtitle && <span>{cat.subtitle}</span>}
-</div>
+                    </div>
-)}
+                )}
-</div>
+            </div>
-))}
+        ))}
-</div>
+    </div>
 </div>
 );
 };