diff options
Diffstat (limited to 'src/pages/shop/brands')
| -rw-r--r-- | src/pages/shop/brands/[slug].js | 17 |
1 files changed, 13 insertions, 4 deletions
diff --git a/src/pages/shop/brands/[slug].js b/src/pages/shop/brands/[slug].js index b04d2715..a2f05cfa 100644 --- a/src/pages/shop/brands/[slug].js +++ b/src/pages/shop/brands/[slug].js @@ -1,5 +1,5 @@ import axios from "axios"; -import { useState } from "react"; +import { useEffect, useState } from "react"; import Filter from "../../../components/Filter"; import Header from "../../../components/Header"; import Layout from "../../../components/Layout"; @@ -58,6 +58,7 @@ export default function BrandDetail({ const productFound = searchResults.response.numFound; const [activeFilter, setActiveFilter] = useState(false); + const [filterCount, setFilterCount] = useState(0); const route = () => { let route = `/shop/brands/${slug}`; @@ -68,6 +69,14 @@ export default function BrandDetail({ return route; } + useEffect(() => { + let calculateFilterCount = 0; + if (category) calculateFilterCount++; + if (price_from || price_to) calculateFilterCount++; + if (order_by) calculateFilterCount++; + setFilterCount(calculateFilterCount); + }, [category, price_from, price_to, order_by]); + return ( <> <Header title={`Distributor ${getNameFromSlug(slug)} Indonesia Harga Official - Indoteknik`} /> @@ -85,9 +94,6 @@ export default function BrandDetail({ /> <Layout> <div className="p-4"> - <button className="btn-light py-2 flex items-center gap-x-2 mb-2" onClick={() => setActiveFilter(true)}> - <FilterIcon className="w-4 h-4" /> <span>Filter</span> - </button> <h1 className="mb-2">Produk</h1> <div className="text-caption-1 mb-4"> {productFound > 0 ? ( @@ -106,6 +112,9 @@ export default function BrandDetail({ </> ) : 'Mungkin yang anda cari'} </div> + <button className="btn-light py-2 flex items-center gap-x-2 mb-4" onClick={() => setActiveFilter(true)}> + <FilterIcon className="w-4 h-4" /> <span>Filter {filterCount > 0 ? `(${filterCount})` : ''}</span> + </button> <div className="grid grid-cols-2 gap-3"> {searchResults.response.products.map((product) => ( <ProductCard key={product.id} data={product} /> |