fix(front) Переделан pagelayout + добавлена AddItem
This commit is contained in:
+1
-1
@@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>MRP</title>
|
<title>FISH FISH</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
@@ -6,18 +6,13 @@ export default function CategoryTabs({
|
|||||||
onSelectCategory,
|
onSelectCategory,
|
||||||
}) {
|
}) {
|
||||||
return (
|
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 ">
|
<div
|
||||||
<button
|
className="flex flex-wrap justify-center gap-6 mt-5 mb-10 text-lg font-medium text-slate-200
|
||||||
className={`uppercase transition-colors duration-200 hover:text-white cursor-pointer ${activeCategory === "all"
|
"
|
||||||
? "text-white border-b-2 border-gold pb-1"
|
|
||||||
: ""
|
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
все
|
|
||||||
</button>
|
|
||||||
{categories.map((cat) => (
|
{categories.map((cat) => (
|
||||||
<button
|
<button
|
||||||
key={cat}
|
key={cat || "all"}
|
||||||
onClick={() => onSelectCategory(cat)}
|
onClick={() => onSelectCategory(cat)}
|
||||||
className={`uppercase transition-colors duration-200 hover:text-white cursor-pointer ${activeCategory === cat
|
className={`uppercase transition-colors duration-200 hover:text-white cursor-pointer ${activeCategory === cat
|
||||||
? "text-white border-b-2 border-gold pb-1"
|
? "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 ">
|
<header className="w-full h-27.5 px-6 flex items-center justify-between ">
|
||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<BurgerButton isOpen={isOpen} onClick={() => setIsOpen(!isOpen)} />
|
<BurgerButton
|
||||||
|
isOpen={isOpen}
|
||||||
|
onClick={() => {
|
||||||
|
setIsOpen(!isOpen);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
<button
|
<button
|
||||||
className="flex flex-col items-center text-sm tracking-widest text-gold"
|
className="flex flex-col items-center text-sm tracking-widest text-gold"
|
||||||
onClick={() => navigate("/")}
|
onClick={() => navigate("/")}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import HeaderMobile from "./HeaderMobile";
|
|||||||
|
|
||||||
export default function PageLayout({ children }) {
|
export default function PageLayout({ children }) {
|
||||||
return (
|
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">
|
<div className="hidden lg:block">
|
||||||
<HeaderDesktop />
|
<HeaderDesktop />
|
||||||
</div>
|
</div>
|
||||||
@@ -19,6 +19,6 @@ export default function PageLayout({ children }) {
|
|||||||
<div className="block lg:hidden">
|
<div className="block lg:hidden">
|
||||||
<FooterMobile />
|
<FooterMobile />
|
||||||
</div>
|
</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 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({
|
const [formData, setFormData] = useState({
|
||||||
name: "",
|
name: "",
|
||||||
unit: "",
|
|
||||||
city: "",
|
city: "",
|
||||||
|
unit: "",
|
||||||
price: "",
|
price: "",
|
||||||
category: "",
|
category: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
const handleChange = (e) => {
|
|
||||||
const { name, value } = e.target;
|
|
||||||
setFormData({
|
|
||||||
...formData,
|
|
||||||
[name]: value,
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSubmit = async (e) => {
|
const handleSubmit = async (e) => {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
|
||||||
const payload = {
|
|
||||||
...formData,
|
|
||||||
price: parseFloat(formData.price) || 0,
|
|
||||||
};
|
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const response = await api.addItem(payload);
|
await api.addItem(formData);
|
||||||
console.log("Товар добавлен", response.data);
|
alert("Товар успешно добавлен");
|
||||||
|
setFormData({
|
||||||
setFormData({ name: "", unit: "", city: "", price: "", category: "" });
|
name: "",
|
||||||
} catch (err) {
|
city: "",
|
||||||
console.error(err);
|
unit: "",
|
||||||
alert(err);
|
price: "",
|
||||||
|
category: "",
|
||||||
|
});
|
||||||
|
} catch (error) {
|
||||||
|
console.error(error);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
<div className="max-w-md mx-auto mt-10 p-6 bg-white rounded-lg shadow-md border">
|
<main className="px-6 md:px-16 grow w-full">
|
||||||
<form onSubmit={handleSubmit} className="space-y-4">
|
<h1 className="text-2xl text-white font-medium my-6">
|
||||||
|
Добавление товара
|
||||||
|
</h1>
|
||||||
|
<form onSubmit={handleSubmit} className="w-full max-w-md p-6">
|
||||||
<div>
|
<div>
|
||||||
<label className="block text-sm font-medium text-slate-500 mb-1">
|
<label className="block text-slate-300 mb-1 text-sm">
|
||||||
Название товара
|
Название
|
||||||
</label>
|
</label>
|
||||||
<input
|
<input
|
||||||
className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
|
||||||
type="text"
|
type="text"
|
||||||
name="unit"
|
placeholder="Введите название"
|
||||||
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
|
|
||||||
value={formData.name}
|
value={formData.name}
|
||||||
onChange={handleChange}
|
onChange={(e) =>
|
||||||
placeholder="Название товара"
|
setFormData({ ...formData, name: e.target.value })
|
||||||
></input>
|
}
|
||||||
<label className="block text-sm font-medium text-slate-500 mb-1">
|
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>
|
</label>
|
||||||
<input
|
<input
|
||||||
className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
type="text"
|
||||||
type="number"
|
placeholder="Введите единицу измерения"
|
||||||
name="price"
|
value={formData.unit}
|
||||||
|
onChange={(e) =>
|
||||||
|
setFormData({ ...formData, unit: e.target.value })
|
||||||
|
}
|
||||||
required
|
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}
|
value={formData.price}
|
||||||
onChange={handleChange}
|
onChange={(e) =>
|
||||||
placeholder="Стоимость"
|
setFormData({ ...formData, price: parseInt(e.target.value) })
|
||||||
></input>
|
}
|
||||||
<label className="block text-sm font-medium text-slate-500 mb-1">
|
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>
|
</label>
|
||||||
<input
|
<input
|
||||||
className="w-full border p-2 rounded focus:ring-2 focus:ring-blue-500 outline-none"
|
|
||||||
type="text"
|
type="text"
|
||||||
name="category"
|
placeholder="Введите категорию"
|
||||||
required
|
|
||||||
value={formData.category}
|
value={formData.category}
|
||||||
onChange={handleChange}
|
onChange={(e) =>
|
||||||
placeholder="Рыба, крабы, гребешки"
|
setFormData({ ...formData, category: e.target.value })
|
||||||
></input>
|
}
|
||||||
|
required
|
||||||
<button type="submit">Добавить товар</button>
|
className="bg-slate-700 w-full text-white rounded px-3 py-2 outline-none"
|
||||||
|
/>
|
||||||
</div>
|
</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>
|
</form>
|
||||||
</div>
|
</main>
|
||||||
</PageLayout>
|
</PageLayout>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,13 +1,13 @@
|
|||||||
import PageLayout from "../components/PageLayout";
|
import PageLayout from "../components/PageLayout";
|
||||||
import * as api from "../api/index";
|
import * as api from "../api/index";
|
||||||
import { useState, useEffect } from "react";
|
import { useState, useEffect, useMemo } from "react";
|
||||||
import CategoryTabs from "../components/CategoryTabs";
|
import CategoryTabs from "../components/CategoryTabs";
|
||||||
import CardItem from "../components/CardItem";
|
import CardItem from "../components/CardItem";
|
||||||
|
|
||||||
export default function Shop() {
|
export default function Shop() {
|
||||||
const [items, setItems] = useState([]);
|
const [items, setItems] = useState([]);
|
||||||
const [categories, setCategories] = useState([]);
|
const [categories, setCategories] = useState([]);
|
||||||
const [activeCategory, setActiveCategory] = useState("all");
|
const [activeCategory, setActiveCategory] = useState("все");
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -24,14 +24,15 @@ export default function Shop() {
|
|||||||
});
|
});
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const filteredItems =
|
const filteredItems = useMemo(() => {
|
||||||
activeCategory === "all"
|
return activeCategory === "все"
|
||||||
? items || []
|
? items || []
|
||||||
: (items || []).filter((item) => {
|
: (items || []).filter((item) => {
|
||||||
if (!item || !item.category) return false;
|
if (!item || !item.category) return false;
|
||||||
|
|
||||||
return item.category.toLowerCase() === activeCategory.toLowerCase();
|
return item.category.toLowerCase() === activeCategory.toLowerCase();
|
||||||
});
|
});
|
||||||
|
}, [items, activeCategory]);
|
||||||
|
|
||||||
const handleAddToCart = (product, selectedWeight) => {
|
const handleAddToCart = (product, selectedWeight) => {
|
||||||
console.log(`Добавлен товар ${product.name}, Вес ${selectedWeight} кг`);
|
console.log(`Добавлен товар ${product.name}, Вес ${selectedWeight} кг`);
|
||||||
@@ -39,10 +40,12 @@ export default function Shop() {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<PageLayout>
|
<PageLayout>
|
||||||
<main className="px-16 grow w-full">
|
<main className="px-6 md:px-16 grow w-full">
|
||||||
<h1 className="text">Ассортимент</h1>
|
<h1 className="text-2xl text-white text-medium md:mt-10">
|
||||||
|
Ассортимент
|
||||||
|
</h1>
|
||||||
<CategoryTabs
|
<CategoryTabs
|
||||||
categories={categories || []}
|
categories={["все", ...(categories || [])]}
|
||||||
activeCategory={activeCategory}
|
activeCategory={activeCategory}
|
||||||
onSelectCategory={setActiveCategory}
|
onSelectCategory={setActiveCategory}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user