import * as React from "react"; import { FiltersBarMarketplaceListingTwo } from "@/registry/filters-bar-marketplace-listing-two/filters-bar-marketplace-listing-two"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; import { IframeAutoHeight } from "@/app/(dynamic-pages)/(external-dynamic-pages)/ui/(showcase)/iframe-auto-height"; type ComponentProps = React.ComponentPropsWithoutRef< typeof FiltersBarMarketplaceListingTwo >; type FiltersBarMarketplaceListingTwoSelection = Parameters< NonNullable >[0]; const categories: ComponentProps["categories"] = [ { id: "templates", label: "Templates", description: "Launch-ready storefront, marketing, and onboarding templates.", children: [ { id: "landing", label: "Landing pages", description: "Hero, pricing, and lead gen templates.", }, { id: "checkout", label: "Checkout", description: "Conversion-optimised checkout flows.", }, { id: "email", label: "Email sequences", description: "Campaigns and lifecycle journeys.", }, ], }, { id: "integrations", label: "Integrations", description: "Marketplace apps, data connectors, and workflow boosters.", children: [ { id: "crm", label: "CRM", description: "Salesforce, HubSpot, Close." }, { id: "support", label: "Support", description: "Zendesk, Intercom, Help Scout.", }, ], }, { id: "assets", label: "Brand assets", description: "Logos, icon packs, photo bundles, and motion graphics.", }, ]; const tags: NonNullable = [ { id: "new", label: "New", description: "Added in the last 14 days", count: 18, }, { id: "bestseller", label: "Bestsellers", description: "Top performers by conversion", count: 42, }, { id: "under-50", label: "Under $50", description: "Budget-friendly essentials", count: 27, }, { id: "premium", label: "Premium", description: "Curated producers and studios", count: 16, }, { id: "bundles", label: "Bundles", description: "Save by packaging complementary products", count: 11, }, ]; const sortOptions: NonNullable = [ { id: "popular", label: "Popularity", description: "Descending by total purchases", }, { id: "rating", label: "Rating", description: "Average review score" }, { id: "recent", label: "Recently added", description: "Newest first" }, { id: "price-asc", label: "Price: Low to high" }, { id: "price-desc", label: "Price: High to low" }, ]; const advancedFilters: NonNullable = [ { id: "shipping", title: "Delivery", description: "Choose fulfillment speed and geography", options: [ { id: "instant", label: "Instant download", count: 64 }, { id: "same-day", label: "Same-day ship", count: 12 }, { id: "intl", label: "International friendly" }, ], }, { id: "seller", title: "Seller rating", selectionMode: "single", options: [ { id: "five-star", label: "4.8★ and up" }, { id: "four-star", label: "4.0★ and up" }, { id: "newcomers", label: "Rising creators" }, ], }, { id: "inventory", title: "Inventory", options: [ { id: "limited", label: "Limited edition", description: "Ships in < 50 units.", }, { id: "subscription", label: "Subscription eligible" }, { id: "lifetime", label: "Lifetime updates" }, ], }, ]; const priceConfig: NonNullable = { min: 0, max: 300, step: 5, currency: "$", }; export function FiltersBarMarketplaceListingTwoDemo() { const [category, setCategory] = React.useState( "templates", ); const [tagsSelection, setTagsSelection] = React.useState([ "new", "bestseller", ]); const [price, setPrice] = React.useState<[number, number]>([25, 160]); const [sort, setSort] = React.useState("popular"); const [search, setSearch] = React.useState(""); const [advancedSelection, setAdvancedSelection] = React.useState({ shipping: ["instant"], seller: ["five-star"], inventory: [], }); return (

setAdvancedSelection({ shipping: [], seller: [], inventory: [] }) } highlightNewArrivals />

Listing filters

Category: {category ?? "All"}

Tags: {tagsSelection.length ? tagsSelection.join(", ") : "None"}

Query state

Price: ${price[0]} – ${price[1]}

Sort: {sort}

Advanced filters:{" "} {Object.entries(advancedSelection).reduce( (total: number, [, values]: [string, string[]]) => total + values.length, 0, )}

); } export default FiltersBarMarketplaceListingTwoDemo;

Simple