forked from dvjsharma/Drawn2Shoe
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
209 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,73 +1,168 @@ | ||
| import React from 'react' | ||
| import React from "react"; | ||
| import axios from "axios"; | ||
| import toast from "react-hot-toast"; | ||
| import { useLocation } from "react-router-dom"; | ||
|
|
||
| const Product = () => { | ||
| return ( | ||
| <div className="bg-gray-100 darkk:bg-gray-800 py-8 min-h-[100vh]"> | ||
| <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | ||
| <div className="flex flex-col md:flex-row -mx-4"> | ||
| <div className="md:flex-1 px-4"> | ||
| <div className="h-[460px] rounded-lg bg-gray-300 darkk:bg-gray-700 mb-4"> | ||
| <img className="w-full h-full object-cover" src="https://cdn.pixabay.com/photo/2020/05/22/17/53/mockup-5206355_960_720.jpg" alt="Product Image" /> | ||
| </div> | ||
| <div className="flex -mx-2 mb-4"> | ||
| <div className="w-1/2 px-2"> | ||
| <button className="w-full bg-gray-900 darkk:bg-gray-600 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800 darkk:hover:bg-gray-700">Add to Cart</button> | ||
| </div> | ||
| <div className="w-1/2 px-2"> | ||
| <button className="w-full bg-gray-200 darkk:bg-gray-700 text-gray-800 darkk:text-white py-2 px-4 rounded-full font-bold hover:bg-gray-300 darkk:hover:bg-gray-600">Add to Wishlist</button> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="md:flex-1 px-4"> | ||
| <h2 className="text-2xl font-bold text-gray-800 darkk:text-white mb-2">Product Name</h2> | ||
| <p className="text-gray-600 darkk:text-gray-300 text-sm mb-4"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sed | ||
| ante justo. Integer euismod libero id mauris malesuada tincidunt. | ||
| </p> | ||
| <div className="flex mb-4"> | ||
| <div className="mr-4"> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300">Price:</span> | ||
| <span className="text-gray-600 darkk:text-gray-300">$29.99</span> | ||
| </div> | ||
| <div> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300">Availability:</span> | ||
| <span className="text-gray-600 darkk:text-gray-300">In Stock</span> | ||
| </div> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300">Select Color:</span> | ||
| <div className="flex items-center mt-2"> | ||
| <button className="w-6 h-6 rounded-full bg-gray-800 darkk:bg-gray-200 mr-2"></button> | ||
| <button className="w-6 h-6 rounded-full bg-red-500 darkk:bg-red-700 mr-2"></button> | ||
| <button className="w-6 h-6 rounded-full bg-blue-500 darkk:bg-blue-700 mr-2"></button> | ||
| <button className="w-6 h-6 rounded-full bg-yellow-500 darkk:bg-yellow-700 mr-2"></button> | ||
| const { shoeImage, shoeName, brand, pId, price } = useLocation().state; | ||
|
|
||
| const [formData, setFormData] = React.useState(); | ||
|
|
||
| function handleChange(event) { | ||
| setFormData(parseInt(event.target.innerText)); | ||
| } | ||
| async function handleSubmit(event) { | ||
| event.preventDefault(); | ||
| // console.log(formData); | ||
| // const data = { | ||
| // shoeImage, | ||
| // shoeName, | ||
| // brand, | ||
| // pId, | ||
| // price, | ||
| // size: formData, | ||
| // }; | ||
| // console.log(data) | ||
| try { | ||
| const { data } = await axios.post( | ||
| "http://localhost:3000/api/users/cart/add", | ||
| { | ||
| shoeImage, | ||
| shoeName, | ||
| brand, | ||
| pId, | ||
| price, | ||
| size: formData, | ||
| }, | ||
| { | ||
| headers: { | ||
| "Content-Type": "application/json", | ||
| }, | ||
| withCredentials: true, | ||
| } | ||
| ); | ||
| toast(data.message); | ||
| window.location.href = "/"; | ||
| } catch (error) { | ||
| toast.error(error.response.data.message); | ||
| // console.error(error); | ||
| } | ||
| } | ||
| return ( | ||
| <div className="bg-gray-100 darkk:bg-gray-800 py-8 min-h-[100vh] flex items-center justify-center"> | ||
| <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8"> | ||
| <div className="flex flex-col md:flex-row -mx-4"> | ||
| <div className="md:flex-1 px-4"> | ||
| <div className="h-[460px] rounded-lg bg-gray-300 darkk:bg-gray-700 mb-4"> | ||
| <img | ||
| className="w-full h-full object-cover" | ||
| src={shoeImage} | ||
| alt="Product Image" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="mb-4"> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300">Select Size:</span> | ||
| <div className="flex items-center mt-2"> | ||
| <button className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600">S</button> | ||
| <button className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600">M</button> | ||
| <button className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600">L</button> | ||
| <button className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600">XL</button> | ||
| <button className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600">XXL</button> | ||
| <div className="md:flex-1 px-4 flex flex-col"> | ||
| <h2 className="text-2xl font-bold uppercase text-gray-800 darkk:text-white"> | ||
| {shoeName} | ||
| </h2> | ||
| <span className="text-gray-500 font-bold ml-[180px] mb-2"> | ||
| ~by {brand} | ||
| </span> | ||
|
|
||
| <div className="mr-4"> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300"> | ||
| {`Suppiler Price: `} | ||
| </span> | ||
| <span className="text-gray-600 darkk:text-gray-300"> | ||
| ₹{parseInt(price)} | ||
| </span> | ||
| <br /> | ||
| <br /> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300"> | ||
| {`Discount applied: `} | ||
| </span> | ||
| <span className="text-gray-600 darkk:text-gray-300"> | ||
| ₹{parseInt(price * 0.1)} | ||
| </span> | ||
| <br /> | ||
| <br /> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300"> | ||
| {`Service Charge: `} | ||
| </span> | ||
| <span className="text-gray-600 darkk:text-gray-300"> | ||
| ₹{parseInt(price * 0.2)} | ||
| </span> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300"> | ||
| <br /> | ||
| <br /> | ||
| {`Final Price: `} | ||
| </span> | ||
| <span className="text-gray-600 darkk:text-gray-300"> | ||
| ₹{parseInt(price * 0.9 + price * 0.2 * 0.9)} | ||
| </span> | ||
| </div> | ||
| <div> | ||
| <br /> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300"> | ||
| {`Availability: `} | ||
| </span> | ||
| <span className="text-gray-600 darkk:text-gray-300"> | ||
| In Stock | ||
| </span> | ||
| </div> | ||
| <br /> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300"> | ||
| Select Size: | ||
| </span> | ||
| <form onSubmit={handleSubmit}> | ||
| <div className="flex items-center mt-2 mb-5"> | ||
| <button type="button" | ||
| className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600" | ||
| name="size" | ||
| onClick={handleChange} | ||
| > | ||
| 7 | ||
| </button> | ||
| <button type="button" | ||
| className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600 " | ||
| name="size" | ||
| onClick={handleChange} | ||
| > | ||
| 8 | ||
| </button> | ||
| <button type="button" | ||
| className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600" | ||
| name="size" | ||
| onClick={handleChange} | ||
| > | ||
| 9 | ||
| </button> | ||
| <button type="button" | ||
| className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600" | ||
| name="size" | ||
| onClick={handleChange} | ||
| > | ||
| 10 | ||
| </button> | ||
| <button type="button" | ||
| className="bg-gray-300 darkk:bg-gray-700 text-gray-700 darkk:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 darkk:hover:bg-gray-600" | ||
| name="size" | ||
| onClick={handleChange} | ||
| > | ||
| 11 | ||
| </button> | ||
| </div> | ||
| <div className="w-1/2 px-2"> | ||
| <button className="w-full bg-gray-900 darkk:bg-gray-600 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800 darkk:hover:bg-gray-700 "> | ||
| Add to Cart | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </div> | ||
| <div> | ||
| <span className="font-bold text-gray-700 darkk:text-gray-300">Product Description:</span> | ||
| <p className="text-gray-600 darkk:text-gray-300 text-sm mt-2"> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed | ||
| sed ante justo. Integer euismod libero id mauris malesuada tincidunt. Vivamus commodo nulla ut | ||
| lorem rhoncus aliquet. Duis dapibus augue vel ipsum pretium, et venenatis sem blandit. Quisque | ||
| ut erat vitae nisi ultrices placerat non eget velit. Integer ornare mi sed ipsum lacinia, non | ||
| sagittis mauris blandit. Morbi fermentum libero vel nisl suscipit, nec tincidunt mi consectetur. | ||
| </p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default Product | ||
| export default Product; |