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
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>MRP</title>
+    <title>FISH FISH</title>
  </head>
  <body>
    <div id="root"></div>
@@ -6,18 +6,13 @@ export default function CategoryTabs({
  onSelectCategory,
 }) {
  return (
-    <div className="flex flex-wrap justify-center md:justify-start gap-6 md:gap-8 my-15 text-sm font-medium tracking-wider text-slate-400 ">
-      <button
-        className={`uppercase transition-colors duration-200 hover:text-white cursor-pointer ${activeCategory === "all"
-            ? "text-white border-b-2 border-gold pb-1"
-            : ""
-          }`}
-      >
-        все
-      </button>
+    <div
+      className="flex flex-wrap justify-center gap-6 mt-5 mb-10 text-lg font-medium text-slate-200
+  "
+    >
      {categories.map((cat) => (
        <button
-          key={cat}
+          key={cat || "all"}
          onClick={() => onSelectCategory(cat)}
          className={`uppercase transition-colors duration-200 hover:text-white cursor-pointer ${activeCategory === cat
              ? "text-white border-b-2 border-gold pb-1"
@@ -13,7 +13,12 @@ export default function HeaderMobile() {
    <>
      <header className="w-full h-27.5 px-6 flex items-center justify-between ">
        <div className="flex items-center gap-1">
-          <BurgerButton isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />
+          <BurgerButton
+            isOpen={isOpen}
+            onClick={() => {
+              setIsOpen(!isOpen);
+            }}
+          />
          <button
            className="flex flex-col items-center text-sm tracking-widest text-gold"
            onClick={() => navigate("/")}
@@ -5,7 +5,7 @@ import HeaderMobile from "./HeaderMobile";

 export default function PageLayout({ children }) {
  return (
-    <body className="min-h-screen flex flex-col w-full">
+    <div className="min-h-screen flex flex-col w-full">
      <div className="hidden lg:block">
        <HeaderDesktop />
      </div>
@@ -19,6 +19,6 @@ export default function PageLayout({ children }) {
      <div className="block lg:hidden">
        <FooterMobile />
      </div>
-    </body>
+    </div>
  );
 }
@@ -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}
        />