mannpatel/Campus-Plug
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update on category

Browse Source
This commit is contained in:
Mann Patel
2025-04-20 12:50:46 -06:00
parent d169c9ba58
commit 6ef4a22e9f
5 changed files with 127 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
frontend/src/pages/ProductDetail.jsx
View File

@@ -1,7 +1,6 @@
import { useState, useEffect } from "react";
import { useParams, Link } from "react-router-dom";
import {
Heart,
ArrowLeft,
Tag,
User,
@@ -26,7 +25,6 @@ const ProductDetail = () => {
reviews: null,
submit: null,
});
const [isFavorite, setIsFavorite] = useState(false);
const [showContactOptions, setShowContactOptions] = useState(false);
const [currentImage, setCurrentImage] = useState(0);
const [reviews, setReviews] = useState([]);
@@ -52,7 +50,6 @@ const ProductDetail = () => {
if (data.success) {
setShowAlert(true);
}
console.log(`Add Product -> History: ${id}`);
};
const [reviewForm, setReviewForm] = useState({
@@ -248,7 +245,7 @@ const ProductDetail = () => {
if (loading.product) {
return (
<div className="flex justify-center items-center h-screen">
<div className="animate-spin h-32 w-32 border-t-2 border-green-500"></div>
<div className="animate-spin h-32 w-32 border-t-2 border-emerald-600"></div>
</div>
);
}
@@ -262,7 +259,7 @@ const ProductDetail = () => {
<p className="text-gray-600">{error.product}</p>
<Link
to="/"
className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
>
Back to Listings
</Link>
@@ -279,7 +276,7 @@ const ProductDetail = () => {
<h2 className="text-2xl text-red-500 mb-4">Product Not Found</h2>
<Link
to="/"
className="mt-4 inline-block bg-green-500 text-white px-4 py-2 hover:bg-green-600"
className="mt-4 inline-block bg-emerald-600 text-white px-4 py-2 hover:bg-emerald-700"
>
Back to Listings
</Link>
@@ -291,15 +288,15 @@ const ProductDetail = () => {
// Render product details
return (
<div className="max-w-6xl mx-auto px-4 py-8">
<div className="mb-6">
{/* <div className="mb-6">
<Link
to="/search"
className="flex items-center text-green-600 hover:text-green-700"
className="flex items-center text-emerald-700 hover:text-emerald-700"
>
<ArrowLeft className="h-4 w-4 mr-1" />
<span>Back</span>
</Link>
</div>
</div> */}
{showAlert && (
<FloatingAlert
message="Product added to favorites!"
@@ -351,7 +348,7 @@ const ProductDetail = () => {
{product.images.map((image, index) => (
<div
key={index}
className={`bg-white border ${currentImage === index ? "border-green-500 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
className={`bg-white border ${currentImage === index ? "border-emerald-600 border-2" : "border-gray-200"} min-w-[100px] cursor-pointer`}
onClick={() => selectImage(index)}
>
<img
@@ -381,13 +378,13 @@ const ProductDetail = () => {
e.preventDefault();
toggleFavorite(product.ProductID);
}}
className="top-0 p-2 rounded-bl-md bg-emerald-600 hover:bg-emerald-500 transition shadow-sm"
className="top-0 p-2 rounded-bl-md bg-emerald-700 hover:bg-emerald-600 transition shadow-sm"
>
<Bookmark className="text-white w-5 h-5" />
</button>
</div>
<div className="text-2xl font-bold text-green-600 mb-4">
<div className="text-2xl font-bold text-emerald-700 mb-4">
$
{typeof product.Price === "number"
? product.Price.toFixed(2)
@@ -418,7 +415,7 @@ const ProductDetail = () => {
<div className="relative">
<button
onClick={() => setShowContactOptions(!showContactOptions)}
className="w-full bg-green-500 hover:bg-green-600 text-white font-medium py-3 px-4 mb-3"
className="w-full bg-emerald-700 hover:bg-emerald-700 text-white font-medium py-3 px-4 mb-3"
>
Contact Seller
</button>
@@ -430,7 +427,7 @@ const ProductDetail = () => {
href={`tel:${product.SellerPhone}`}
className="flex items-center gap-2 p-3 hover:bg-gray-50 border-b border-gray-100"
>
<Phone className="h-5 w-5 text-green-500" />
<Phone className="h-5 w-5 text-emerald-600" />
<span>Call Seller</span>
</a>
)}
@@ -440,7 +437,7 @@ const ProductDetail = () => {
href={`mailto:${product.SellerEmail}`}
className="flex items-center gap-2 p-3 hover:bg-gray-50"
>
<Mail className="h-5 w-5 text-green-500" />
<Mail className="h-5 w-5 text-emerald-600" />
<span>Email Seller</span>
</a>
)}
@@ -477,7 +474,7 @@ const ProductDetail = () => {
<div className="bg-white border border-gray-200 p-6">
{loading.reviews ? (
<div className="flex justify-center py-8">
<div className="animate-spin h-8 w-8 border-t-2 border-green-500"></div>
<div className="animate-spin h-8 w-8 border-t-2 border-emerald-600"></div>
</div>
) : error.reviews ? (
<div className="text-red-500 mb-4">
@@ -524,7 +521,7 @@ const ProductDetail = () => {
<div className="mt-4">
<button
onClick={() => setShowReviewForm(true)}
className="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4"
className="bg-emerald-600 hover:bg-emerald-700 text-white font-medium py-2 px-4"
>
Write a Review
</button>
@@ -582,7 +579,7 @@ const ProductDetail = () => {
id="comment"
value={reviewForm.comment}
onChange={handleReviewInputChange}
className="w-full p-3 border border-gray-300 focus:outline-none focus:border-green-500"
className="w-full p-3 border border-gray-300 focus:outline-none focus:border-emerald-600"
rows="4"
required
></textarea>
@@ -598,7 +595,7 @@ const ProductDetail = () => {
</button>
<button
type="submit"
className="px-4 py-2 bg-green-500 text-white hover:bg-green-600"
className="px-4 py-2 bg-emerald-600 text-white hover:bg-emerald-700"
disabled={loading.submitting}
>
{loading.submitting ? "Submitting..." : "Submit Review"}