From 277558b34c0a1053983170c58dbce2e0c234bb5b Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Fri, 5 Dec 2025 00:23:32 +0300
Subject: [PATCH] .

---
 .../src/components/Categories/Categories.tsx  | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/front/src/components/Categories/Categories.tsx b/front/src/components/Categories/Categories.tsx
index 727a2b8..2a72a39 100644
--- a/front/src/components/Categories/Categories.tsx
+++ b/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}>
-{categories.map((cat) => (
-<div
-key={cat.id}
-className={`${styles.card} ${cat.highlight ? styles.highlight : ""}`}
->
-<img src={cat.image} className={styles.image} alt={cat.title} />
+    <div className={styles.grid}>
+        {categories.map((cat) => (
+            <div
+                key={cat.id}
+                className={`${styles.card} ${cat.highlight ? styles.highlight : ""}`}
+            >
+                <img src={cat.image} className={styles.image} alt={cat.title} />
+                {cat.highlight && (
+                    <div className={styles.overlay}>
+                    <h3>{cat.title}</h3>
+                    {cat.subtitle && <h4>{cat.subtitle}</h4>}
+                    <Button 
+                        label="СМОТРЕТЬ КАТАЛОГ" 
+                        onClick={handleClick}
+                    />
+                    </div>
+                )}
 
 
-{cat.highlight && (
-<div className={styles.overlay}>
-<h3>{cat.title}</h3>
-{cat.subtitle && <h4>{cat.subtitle}</h4>}
-<Button 
-                                label="СМОТРЕТЬ КАТАЛОГ" 
-                                onClick={handleClick}
-                            />
-</div>
-)}
-
-
-{!cat.highlight && (
-<div className={styles.titleSmall}>
-<span>{cat.title}</span>
-{cat.subtitle && <span>{cat.subtitle}</span>}
-</div>
-)}
-</div>
-))}
-</div>
+                    {!cat.highlight && (
+                    <div className={styles.titleSmall}>
+                    <span>{cat.title}</span>
+                    {cat.subtitle && <span>{cat.subtitle}</span>}
+                    </div>
+                )}
+            </div>
+        ))}
+    </div>
 </div>
 );
 };