Untitled
import React, { useState } from "react"; import { Link } from "react-router-dom"; import Verena from "../assets/Varena.jpg"; import Damaris from "../assets/Damaris.jpg"; import Cecelia from "../assets/Cecelia.jpg"; import { Heart, Eye } from "lucide-react"; import "./ReadyMadeCurtain.css"; const curtainProducts = [ { id: 1, name: "Verena", price: 1599, image: Verena, size: "Large Door", color: "Beige" }, { id: 2, name: "Damaris", price: 1699, image: Damaris, size: "Door 7 Ft", color: "Blue" }, { id: 3, name: "Cecelia", price: 1799, image: Cecelia, size: "Window", color: "Brown" }, ]; const sizeOptions = ["Large Door", "Door", "Door 7 Ft", "Window"]; const colorOptions = [ { label: "Beige", color: "#F5F5DC" }, { label: "Blue", color: "#0000FF" }, { label: "Brown", color: "#8B4513" }, { label: "Grey", color: "#808080" }, { label: "White", color: "#FFFFFF" }, { label: "Pink", color: "#FFC0CB" }, { label: "Turquoise", color: "#40E0D0" }, { label: "Orange", color: "#FFA500" }, { label: "Yellow", color: "#FFFF00" }, { label: "Golden", color: "#FFD700" }, { label: "Green", color: "#008000" }, { label: "Red", color: "#FF0000" }, ]; const ReadyMadeCurtains = () => { const [selectedSizes, setSelectedSizes] = useState([]); const [selectedColors, setSelectedColors] = useState([]); const [priceRange, setPriceRange] = useState(2000); const [isSizeOpen, setIsSizeOpen] = useState(false); const [isColorOpen, setIsColorOpen] = useState(false); const [isPriceOpen, setIsPriceOpen] = useState(false); const [sortOption, setSortOption] = useState(""); const [hoveredProduct, setHoveredProduct] = useState(null); // Handle sorting const handleSort = (e) => { setSortOption(e.target.value); }; // Handle size filter selection const handleSizeChange = (size) => { setSelectedSizes((prevSelected) => prevSelected.includes(size) ? prevSelected.filter((s) => s !== size) : [...prevSelected, size] ); }; // Handle color filter selection const handleColorChange = (color) => { setSelectedColors((prevSelected) => prevSelected.includes(color) ? prevSelected.filter((c) => c !== color) : [...prevSelected, color] ); }; // Filter and sort products const filteredCurtains = curtainProducts .filter( (product) => (selectedSizes.length === 0 || selectedSizes.includes(product.size)) && (selectedColors.length === 0 || selectedColors.includes(product.color)) && product.price <= priceRange ) .sort((a, b) => { if (sortOption === "Price: Low to High") return a.price - b.price; if (sortOption === "Price: High to Low") return b.price - a.price; return 0; // Default (no sorting) }); const handleAddToCart = (product) => { console.log(`${product.name} added to cart.`); }; const handleBuyNow = (product) => { console.log(`Proceeding to buy ${product.name}.`); }; const handleLike = (product) => { console.log(`${product.name} liked.`); }; const handleQuickView = (product) => { console.log(`Quick view for ${product.name}.`); }; return ( <div className="curtain-page"> {/* Breadcrumb */} <div className="breadcrumb"> <Link to="/">Home</Link> / <Link to="/shop">Shop</Link> / <span className="current-page">READY MADE CURTAINS</span> </div> <div className="curtain-container"> {/* Sidebar */} <aside className="sidebar"> <h3>Shop By</h3> {/* Size Filter */} <div className="filter-section"> <div className="filter-header" onClick={() => setIsSizeOpen(!isSizeOpen)}> <strong>Size</strong> <span>{isSizeOpen ? "−" : "+"}</span> </div> {isSizeOpen && ( <ul className="filter-options"> {sizeOptions.map((size) => ( <li key={size}> <input type="checkbox" checked={selectedSizes.includes(size)} onChange={() => handleSizeChange(size)} /> <label>{size}</label> </li> ))} </ul> )} </div> {/* Color Filter */} <div className="filter-section"> <div className="filter-header" onClick={() => setIsColorOpen(!isColorOpen)}> <strong>Color</strong> <span>{isColorOpen ? "−" : "+"}</span> </div> {isColorOpen && ( <div className="color-options"> {colorOptions.map((color) => ( <div key={color.label} className={`color-circle ${selectedColors.includes(color.label) ? "selected" : ""}`} style={{ backgroundColor: color.color }} onClick={() => handleColorChange(color.label)} ></div> ))} </div> )} </div> {/* Price Filter */} <div className="filter-section"> <div className="filter-header" onClick={() => setIsPriceOpen(!isPriceOpen)}> <strong>Price</strong> <span>{isPriceOpen ? "−" : "+"}</span> </div> {isPriceOpen && ( <div className="price-filter"> <input type="range" min="1000" max="2000" step="100" value={priceRange} onChange={(e) => setPriceRange(Number(e.target.value))} /> <p>Up to ₹{priceRange}</p> </div> )} </div> </aside> {/* Main Content */} <main className="curtain-content"> <div className="content-header"> <h2> READY MADE CURTAINS <span className="items-count">({filteredCurtains.length})</span> </h2> <select className="sort-dropdown" value={sortOption} onChange={handleSort}> <option value="">Sort By</option> <option value="Price: Low to High">Price: Low to High</option> <option value="Price: High to Low">Price: High to Low</option> </select> </div> <div className="curtain-list"> {filteredCurtains.length > 0 ? ( filteredCurtains.map((product) => ( <div key={product.id} className="curtain-card" onMouseEnter={() => setHoveredProduct(product.id)} onMouseLeave={() => setHoveredProduct(null)} > <img src={product.image} alt={product.name} className="curtain-image" /> <div className="curtain-info"> <h3>{product.name}</h3> <p className="price">₹{product.price}</p> </div> {/* Hover Overlay */} {hoveredProduct === product.id && ( <div className="hover-overlay"> <div className="hover-icons"> <Heart className="hover-icon" onClick={() => handleLike(product)} /> <Eye className="hover-icon" onClick={() => handleQuickView(product)} /> </div> <div className="hover-buttons"> <button onClick={() => handleAddToCart(product)} className="btn-add-to-cart"> Add to Cart </button> <button onClick={() => handleBuyNow(product)} className="btn-buy-now"> Buy Now </button> </div> </div> )} </div> )) ) : ( <p>No products found. Please adjust your filters.</p> )} </div> </main> </div> </div> ); }; export default ReadyMadeCurtains;
Leave a Comment