From 951003952e654feb9f2dd0edbfba06a964f12f93 Mon Sep 17 00:00:00 2001
From: Oleg Urin <olegurin76@mail.ru>
Date: Mon, 24 Nov 2025 02:03:50 +0300
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82=20=D0=BF?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B5=D0=B1=D0=BE=D1=80=D0=B0=20=D0=BA=D0=B0=D1=80?=
 =?UTF-8?q?=D1=82=D0=BE=D1=87=D0=B5=D0=BA=20=D1=81=20=D0=BA=D0=B0=D1=82?=
 =?UTF-8?q?=D0=B5=D0=B3=D0=BE=D1=80=D0=B8=D1=8F=D0=BC=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/src/features/catalog/CategoryCards.tsx | 23 ++++++++++++++++++++
 front/src/types/categories.ts                |  1 +
 2 files changed, 24 insertions(+)
 create mode 100644 front/src/features/catalog/CategoryCards.tsx

diff --git a/front/src/features/catalog/CategoryCards.tsx b/front/src/features/catalog/CategoryCards.tsx
new file mode 100644
index 0000000..8f07c5d
--- /dev/null
+++ b/front/src/features/catalog/CategoryCards.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "./CategoryCards.module.css";
+import { useAppSelector } from "../../app/hooks";
+
+interface Props { 
+    onSelect?: (id:number) => void 
+}
+
+const CategoryCards: React.FC<Props> = ({ onSelect }) => {
+  const categories = useAppSelector(s => s.categories.items);
+
+  return (
+    <div className={styles.grid}>
+      {categories.map(c => (
+        <div key={c.id} className={styles.card} onClick={() => onSelect?.(c.id)}>
+          {c.image ? <img src={c.image} alt={c.name} className={styles.img} /> : <img src="/mnt/data/c9552f5e-1741-4845-8d5f-9d438f068636.png" alt={c.name} className={styles.img} />}
+          <div className={styles.name}>{c.name}</div>
+        </div>
+      ))}
+    </div>
+  );
+};
+export default CategoryCards;
\ No newline at end of file
diff --git a/front/src/types/categories.ts b/front/src/types/categories.ts
index 9b332c5..3e813a7 100644
--- a/front/src/types/categories.ts
+++ b/front/src/types/categories.ts
@@ -12,6 +12,7 @@ export interface CategoryAtributes {
 export interface Category {
   id: number;
   name: string;
+  image?: string;
   atributes: CategoryAtributes[];
 }