diff --git a/frontend/index.html b/frontend/index.html index 8eb45d6..9f20b0f 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -3,7 +3,7 @@ - MRP + FISH FISH
diff --git a/frontend/src/components/CategoryTabs.jsx b/frontend/src/components/CategoryTabs.jsx index 9e0dd2b..5dcdd71 100644 --- a/frontend/src/components/CategoryTabs.jsx +++ b/frontend/src/components/CategoryTabs.jsx @@ -6,18 +6,13 @@ export default function CategoryTabs({ onSelectCategory, }) { return ( -
- +
{categories.map((cat) => ( + onChange={(e) => + setFormData({ ...formData, category: e.target.value }) + } + required + className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none" + />
+ -
+ ); } diff --git a/frontend/src/pages/Shop.jsx b/frontend/src/pages/Shop.jsx index d24eea3..fe230c5 100644 --- a/frontend/src/pages/Shop.jsx +++ b/frontend/src/pages/Shop.jsx @@ -1,13 +1,13 @@ import PageLayout from "../components/PageLayout"; import * as api from "../api/index"; -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; import CategoryTabs from "../components/CategoryTabs"; import CardItem from "../components/CardItem"; export default function Shop() { const [items, setItems] = useState([]); const [categories, setCategories] = useState([]); - const [activeCategory, setActiveCategory] = useState("all"); + const [activeCategory, setActiveCategory] = useState("все"); const [loading, setLoading] = useState(true); useEffect(() => { @@ -24,14 +24,15 @@ export default function Shop() { }); }, []); - const filteredItems = - activeCategory === "all" + const filteredItems = useMemo(() => { + return activeCategory === "все" ? items || [] : (items || []).filter((item) => { if (!item || !item.category) return false; return item.category.toLowerCase() === activeCategory.toLowerCase(); }); + }, [items, activeCategory]); const handleAddToCart = (product, selectedWeight) => { console.log(`Добавлен товар ${product.name}, Вес ${selectedWeight} кг`); @@ -39,10 +40,12 @@ export default function Shop() { return ( -
-

Ассортимент

+
+

+ Ассортимент +