import React, { useEffect, useState } from "react"; import ListingFilter from "./ListingFilter"; import ListingItems from "./ListingItems"; import Image from "next/image"; const ListingInner = () => { const [isFilterViewOpen, setIsFilterViewOpen] = useState(false); const [isGridViewOpen, setIsGridViewOpen] = useState(false); const [isOpen, setIsOpen] = useState(false); const [size, setSize] = useState(768); const toggleGridViewDropdown = () => { setIsGridViewOpen(!isGridViewOpen); }; const toggleFilterViewDropdown = () => { setIsFilterViewOpen(!isFilterViewOpen); }; const toggleDropdown = () => { setIsOpen(!isOpen); }; useEffect(() => { const handleResize = () => { // console.log("Window Width:"); setSize(window.innerWidth); }; // Initial window width handleResize(); // Add event listener for window resize window.addEventListener("resize", handleResize); // Clean up the event listener on component unmount return () => { window.removeEventListener("resize", handleResize); }; }, []); return ( <> <section className="listing-inner-session"> <div className="container-fluid"> <div className="row"> <div className="col-12"> <div className="filter-dd"> <div className="filter-view box-inner"> <a onClick={toggleFilterViewDropdown}> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/filter-view.svg" /> </span> </a> {/* <div className={`inner-content ${isGridViewOpen ? "open" : ""}`}> <div className="top-head"> <div className="">View By</div> <div className="close-btn" onClick={toggleGridViewDropdown}> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" /> </span> </div> </div> <ul className="list-by"> <li> <input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" /> <label htmlFor="3 Grid View">3 Grid View</label> </li> <li> <input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" /> <label htmlFor="4 Grid View">4 Grid View</label> </li> </ul> </div> */} </div> <div className="grid-view box-inner"> <a onClick={toggleGridViewDropdown}> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/grid-view.svg" /> </span> </a> <div className={`inner-content ${isGridViewOpen ? "open" : ""}`}> <div className="top-head"> <div className="">View By</div> <div className="close-btn" onClick={toggleGridViewDropdown}> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" /> </span> </div> </div> <ul className="list-by"> <li> <input className="form-check-labe" type="radio" id="3 Grid View" name="gridView" /> <label htmlFor="3 Grid View">3 Grid View</label> </li> <li> <input className="form-check-labe" type="radio" id="4 Grid View" name="gridView" /> <label htmlFor="4 Grid View">4 Grid View</label> </li> </ul> </div> </div> <div className="sort-by box-inner"> <a onClick={toggleDropdown}> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/sort-by.svg" /> </span> </a> <div className={`inner-content ${isOpen ? "open" : ""}`}> <div className="top-head"> <div className="">Sort By</div> <div className="close-btn" onClick={toggleDropdown}> <span className="image-container"> <Image layout="fill" alt="" className="image img-fluid" src="/images/icons/close-icon.svg" /> </span> </div> </div> <ul className="list-by"> <li> <input className="form-check-labe" type="radio" id="Price - High to Low" name="sort" /> <label htmlFor="Price - High to Low">Price - High to Low</label> </li> <li> <input className="form-check-labe" type="radio" id="Price - Low to High" name="sort" /> <label htmlFor="Price - Low to High">Price - Low to High</label> </li> <li> <input className="form-check-labe" type="radio" id="Most Rated" name="sort" /> <label htmlFor="Most Rated">Most Rated</label> </li> <li> <input className="form-check-labe" type="radio" id="Most Popular" name="sort" /> <label htmlFor="Most Popular">Most Popular</label> </li> </ul> </div> </div> </div> </div> </div> <div className="row "> { (isFilterViewOpen || size > 768) && ( <> <div className={`col-md-3 first-block-content ${isFilterViewOpen ? "show" : ""}`}> <ListingFilter /> </div> </> )} <div className="col-md-9"> <ListingItems /> </div> </div> </div> </section> </> ); }; export default ListingInner;