import React, { useState } from "react"; import { Card, Col, Container, Row, Collapse, Dropdown, } from "react-bootstrap"; import BreadCrumb from "../../../Components/Common/BreadCrumb"; // RangeSlider import Nouislider from "nouislider-react"; import "nouislider/distribute/nouislider.css"; import { expolreNow } from "../../../common/data/index"; import { Head, Link } from "@inertiajs/react"; import Layout from "../../../Layouts"; const ExploreNow = () => { const [NFTList, setNFTList] = useState(expolreNow); const [isFilterOpen, setIsFilterOpen] = useState(true); const handleFilterToggle = () => { setIsFilterOpen(!isFilterOpen); }; const favouriteBtn = (ele:any) => { if (ele.closest("button").classList.contains("active")) { ele.closest("button").classList.remove("active"); } else { ele.closest("button").classList.add("active"); } }; const onUpdate = (value:any) => { setNFTList( expolreNow.filter( (NFT) => NFT.price >= value[0] && NFT.price <= value[1], ) ); }; const category = (e:any) => { setNFTList( expolreNow.filter((item) => item.category === e)); }; const fileType = (e:any) => { setNFTList( expolreNow.filter((item) => item.fileType === e)); }; const salesType = (e:any) => { setNFTList( expolreNow.filter((item) => item.sales === e)); }; const searchNFT = () => { var searchProductList:any = document.getElementById("searchProductList") ; var inputVal = searchProductList.value.toLowerCase(); function filterItems(arr:any, query:any) { return arr.filter(function (el:any) { return el.title.toLowerCase().indexOf(query.toLowerCase()) !== -1; }); } var filterData = filterItems(expolreNow, inputVal); if (filterData.length === 0) { var noresult = document.getElementById("noresult") as HTMLElement; noresult.style.display = "block"; var loadmore = document.getElementById("loadmore") as HTMLElement; loadmore.style.display = "none"; } else { var noResult = document.getElementById("noresult") as HTMLElement; noResult.style.display = "none"; var loadMore = document.getElementById("loadmore") as HTMLElement; loadMore.style.display = "block"; } setNFTList(filterData); }; return (
Explore Product
Filters
Search
Select Category
File Type
Sales Type
Price

Result: 8745

All View Action Another action Something else here
{NFTList.map((item:any, key:any) => (
undefined
Place Bid

{" "} {item.likes}k

{item.title}

{item.category}
Highest: {item.highestBid}ETH
{item.price}ETH
))}
Sorry! No Result Found
); }; ExploreNow.layout = (page:any) => export default ExploreNow;