121 lines
3.8 KiB
React
121 lines
3.8 KiB
React
import PageLayout from "../components/PageLayout";
|
|
import * as api from "../api/index";
|
|
import { useState } from "react";
|
|
|
|
export default function AddItem() {
|
|
const [formData, setFormData] = useState({
|
|
name: "",
|
|
city: "",
|
|
unit: "",
|
|
price: "",
|
|
category: "",
|
|
});
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
|
|
try {
|
|
await api.addItem(formData);
|
|
alert("Товар успешно добавлен");
|
|
setFormData({
|
|
name: "",
|
|
city: "",
|
|
unit: "",
|
|
price: "",
|
|
category: "",
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<PageLayout>
|
|
<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-slate-300 mb-1 text-sm">
|
|
Название
|
|
</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Введите название"
|
|
value={formData.name}
|
|
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
|
|
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={(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
|
|
type="text"
|
|
placeholder="Введите категорию"
|
|
value={formData.category}
|
|
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>
|
|
</main>
|
|
</PageLayout>
|
|
);
|
|
}
|