Skip to content

Commit

Permalink
Create State Variables to store the Product Data
Browse files Browse the repository at this point in the history
  • Loading branch information
@elyse502
elyse502 committed Nov 5, 2024
1 parent 24eae71 commit 249d2ae
Showing 1 changed file with 143 additions and 23 deletions.
166 changes: 143 additions & 23 deletions admin/src/pages/Add.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,20 @@
import React from "react";
import React, { useState } from "react";
import { assets } from "../assets/assets";

const Add = () => {
const [image1, setImage1] = useState(false);
const [image2, setImage2] = useState(false);
const [image3, setImage3] = useState(false);
const [image4, setImage4] = useState(false);

const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [Price, setPrice] = useState("");
const [category, setCategory] = useState("Men");
const [subCategory, setSubCategory] = useState("Topwear");
const [bestseller, setBestseller] = useState(false);
const [sizes, setSizes] = useState([]);

return (
<div>
<form className="flex flex-col w-full items-start gap-3">
Expand All @@ -12,41 +25,63 @@ const Add = () => {
<label htmlFor="image1">
<img
className="w-20"
src={assets.upload_area}
src={!image1 ? assets.upload_area : URL.createObjectURL(image1)}
alt="upload_area"
/>
<input type="file" id="image1" hidden />
<input
onChange={(e) => setImage1(e.target.files[0])}
type="file"
id="image1"
hidden
/>
</label>
<label htmlFor="image2">
<img
className="w-20"
src={assets.upload_area}
src={!image2 ? assets.upload_area : URL.createObjectURL(image2)}
alt="upload_area"
/>
<input type="file" id="image2" hidden />
<input
onChange={(e) => setImage2(e.target.files[0])}
type="file"
id="image2"
hidden
/>
</label>
<label htmlFor="image3">
<img
className="w-20"
src={assets.upload_area}
src={!image3 ? assets.upload_area : URL.createObjectURL(image3)}
alt="upload_area"
/>
<input type="file" id="image3" hidden />
<input
onChange={(e) => setImage3(e.target.files[0])}
type="file"
id="image3"
hidden
/>
</label>
<label htmlFor="image4">
<img
className="w-20"
src={assets.upload_area}
src={!image4 ? assets.upload_area : URL.createObjectURL(image4)}
alt="upload_area"
/>
<input type="file" id="image4" hidden />
<input
onChange={(e) => setImage4(e.target.files[0])}
type="file"
id="image4"
hidden
/>
</label>
</div>
</div>

<div className="w-full">
<p className="mb-2">Product name</p>
<input
onChange={(e) => setName(e.target.value)}
value={name}
className="w-full max-w-[500px] px-3 py-2"
type="text"
placeholder="Type here"
Expand All @@ -57,6 +92,8 @@ const Add = () => {
<div className="w-full">
<p className="mb-2">Product description</p>
<textarea
onChange={(e) => setDescription(e.target.value)}
value={description}
className="w-full max-w-[500px] px-3 py-2"
type="text"
placeholder="Write content here"
Expand All @@ -67,16 +104,22 @@ const Add = () => {
<div className="flex flex-col sm:flex-row gap-2 w-full sm:gap-8">
<div>
<p className="mb-2">Product category</p>
<select className="w-full px-3 py-2">
<selec
onChange={(e) => setCategory(e.target.value)}
className="w-full px-3 py-2"
>
<option value="Men">Men</option>
<option value="Women">Women</option>
<option value="Kids">Kids</option>
</select>
</selec>
</div>

<div>
<p className="mb-2">Sub category</p>
<select className="w-full px-3 py-2">
<select
onChange={(e) => setSubCategory(e.target.value)}
className="w-full px-3 py-2"
>
<option value="Topwear">Topwear</option>
<option value="Bottomwear">Bottomwear</option>
<option value="Winterwear">Winterwear</option>
Expand All @@ -86,6 +129,8 @@ const Add = () => {
<div>
<p className="mb-2">Product Price</p>
<input
onChange={(e) => setPrice(e.target.value)}
value={Price}
className="w-full px-3 py-2 sm:w-[120px]"
type="Number"
placeholder="25"
Expand All @@ -96,30 +141,105 @@ const Add = () => {
<div>
<p className="mb-2">Product Sizes</p>
<div className="flex gap-3">
<div>
<p className="bg-slate-200 px-3 py-1 cursor-pointer">S</p>
<div
onClick={() =>
setSizes((prev) =>
prev.includes("S")
? prev.filter((item) => item !== "S")
: [...prev, "S"]
)
}
>
<p
className={`${
sizes.includes("S") ? "bg-pink-100" : "bg-slate-200"
} px-3 py-1 cursor-pointer`}
>
S
</p>
</div>

<div>
<p className="bg-slate-200 px-3 py-1 cursor-pointer">M</p>
<div
onClick={() =>
setSizes((prev) =>
prev.includes("M")
? prev.filter((item) => item !== "M")
: [...prev, "M"]
)
}
>
<p
className={`${
sizes.includes("M") ? "bg-pink-100" : "bg-slate-200"
} px-3 py-1 cursor-pointer`}
>
M
</p>
</div>

<div>
<p className="bg-slate-200 px-3 py-1 cursor-pointer">L</p>
<div
onClick={() =>
setSizes((prev) =>
prev.includes("L")
? prev.filter((item) => item !== "L")
: [...prev, "L"]
)
}
>
<p
className={`${
sizes.includes("L") ? "bg-pink-100" : "bg-slate-200"
} px-3 py-1 cursor-pointer`}
>
L
</p>
</div>

<div>
<p className="bg-slate-200 px-3 py-1 cursor-pointer">XL</p>
<div
onClick={() =>
setSizes((prev) =>
prev.includes("XL")
? prev.filter((item) => item !== "XL")
: [...prev, "XL"]
)
}
>
<p
className={`${
sizes.includes("XL") ? "bg-pink-100" : "bg-slate-200"
} px-3 py-1 cursor-pointer`}
>
XL
</p>
</div>

<div>
<p className="bg-slate-200 px-3 py-1 cursor-pointer">XXL</p>
<div
onClick={() =>
setSizes((prev) =>
prev.includes("XXL")
? prev.filter((item) => item !== "XXL")
: [...prev, "XXL"]
)
}
>
<p
className={`${
sizes.includes("XXL") ? "bg-pink-100" : "bg-slate-200"
} px-3 py-1 cursor-pointer`}
>
XXL
</p>
</div>
</div>
</div>

<div className="flex gap-2 mt-2">
<input type="checkbox" id="bestseller" />
<input
onChange={() => setBestseller((prev) => !prev)}
checked={bestseller}
type="checkbox"
id="bestseller"
/>
<label className="cursor-pointer" htmlFor="bestseller">
Add to bestseller
</label>
Expand Down

0 comments on commit 249d2ae

Please sign in to comment.