fix(front) Переделан pagelayout + добавлена AddItem

2026-06-10 17:21:29 +03:00
parent 735d06f14e
commit ef5ee1ef99
6 changed files with 107 additions and 97 deletions
@@ -1,113 +1,120 @@
-import { useState } from "react";
-import * as api from "../api"; // Импортируем все функции из api/index.js
 import PageLayout from "../components/PageLayout";
+import * as api from "../api/index";
+import { useState } from "react";

-export default function Dashboard() {
+export default function AddItem() {
  const [formData, setFormData] = useState({
    name: "",
-    unit: "",
    city: "",
+    unit: "",
    price: "",
    category: "",
  });

-  const handleChange = (e) => {
-    const { name, value } = e.target;
-    setFormData({
-      ...formData,
-      [name]: value,
-    });
-  };
-
  const handleSubmit = async (e) => {
    e.preventDefault();

-    const payload = {
-      ...formData,
-      price: parseFloat(formData.price) || 0,
-    };
-
    try {
-      const response = await api.addItem(payload);
-      console.log("Товар добавлен", response.data);
-
-      setFormData({ name: "", unit: "", city: "", price: "", category: "" });
-    } catch (err) {
-      console.error(err);
-      alert(err);
+      await api.addItem(formData);
+      alert("Товар успешно добавлен");
+      setFormData({
+        name: "",
+        city: "",
+        unit: "",
+        price: "",
+        category: "",
+      });
+    } catch (error) {
+      console.error(error);
    }
  };

  return (
    <PageLayout>
-      <div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border">
-        <form onSubmit={handleSubmit} className="space-y-4">
+      <main className="px-6 md:px-16 grow w-full">
+        <h1 className="text-2xl text-white font-medium my-6">
+          Добавление товара
+        </h1>
+        <form onSubmit={handleSubmit} className="w-full max-w-md p-6">
          <div>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
-              Название товара
+            <label className="block text-slate-300 mb-1 text-sm">
+              Название
            </label>
            <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
              type="text"
-              name="unit"
-              required
-              value={formData.unit}
-              onChange={handleChange}
-              placeholder="кг, шт, упаковка"
-            ></input>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
-              Город
-            </label>
-            <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
-              type="text"
-              name="city"
-              required
-              value={formData.city}
-              onChange={handleChange}
-              placeholder="Город"
-            ></input>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
-              Название товара
-            </label>
-            <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
-              type="text"
-              name="name"
-              required
+              placeholder="Введите название"
              value={formData.name}
-              onChange={handleChange}
-              placeholder="Название товара"
-            ></input>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
-              Стоимость
+              onChange={(e) =>
+                setFormData({ ...formData, name: e.target.value })
+              }
+              required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-slate-300 mb-1 text-sm">Город</label>
+            <input
+              type="text"
+              placeholder="Введите город"
+              value={formData.city}
+              onChange={(e) =>
+                setFormData({ ...formData, city: e.target.value })
+              }
+              required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-slate-300 mb-1 text-sm">
+              Единица измерения
            </label>
            <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
-              type="number"
-              name="price"
+              type="text"
+              placeholder="Введите единицу измерения"
+              value={formData.unit}
+              onChange={(e) =>
+                setFormData({ ...formData, unit: e.target.value })
+              }
              required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-slate-300 mb-1 text-sm">Цена</label>
+            <input
+              type="text"
+              placeholder="Введите цену"
              value={formData.price}
-              onChange={handleChange}
-              placeholder="Стоимость"
-            ></input>
-            <label className="block text-sm font-medium text-slate-500 mb-1">
+              onChange={(e) =>
+                setFormData({ ...formData, price: parseInt(e.target.value) })
+              }
+              required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
+          </div>
+          <div>
+            <label className="block text-slate-300 mb-1 text-sm">
              Категория
            </label>
            <input
-              className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
              type="text"
-              name="category"
-              required
+              placeholder="Введите категорию"
              value={formData.category}
-              onChange={handleChange}
-              placeholder="Рыба, крабы, гребешки"
-            ></input>
-
-            <button type="submit">Добавить товар</button>
+              onChange={(e) =>
+                setFormData({ ...formData, category: e.target.value })
+              }
+              required
+              className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
+            />
          </div>
+          <button
+            type="submit"
+            className="w-full bg-gold hover:bg-red-400 text-white font-medium py-2 rounded transition-colors duration-200 ease-in-out"
+          >
+            Создать товар
+          </button>
        </form>
-      </div>
+      </main>
    </PageLayout>
  );
 }
@@ -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 (
    <PageLayout>
-      <main className="px-16 grow w-full">
-        <h1 className="text">Ассортимент</h1>
+      <main className="px-6 md:px-16 grow w-full">
+        <h1 className="text-2xl text-white text-medium md:mt-10">
+          Ассортимент
+        </h1>
        <CategoryTabs
-          categories={categories || []}
+          categories={["все", ...(categories || [])]}
          activeCategory={activeCategory}
          onSelectCategory={setActiveCategory}
        />