Horizontal Filter Bar 1

1'use client'
2 
3import { useState } from 'react'
4import { ChevronDown, Search, SlidersHorizontal, X } from 'lucide-react'
5 
6import { Badge } from '@/components/ui/badge'
7import { Button } from '@/components/ui/button'
8import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
9import { Input } from '@/components/ui/input'
10 
11import { categories, priceRanges, sortOptions } from "@/components/data/category-filter-1-data"
12 
13export function CategoryFilter1() {
14  const [selectedCategory, setSelectedCategory] = useState('all')
15  const [selectedPriceRange, setSelectedPriceRange] = useState('all')
16  const [selectedSort, setSelectedSort] = useState('featured')
17  const [searchQuery, setSearchQuery] = useState('')
18 
19  const activeFilters = []
20  if (selectedCategory !== 'all') {
21    const category = categories.find(c => c.id === selectedCategory)
22    if (category) activeFilters.push({ type: 'category', label: category.name, value: selectedCategory })
23  }
24  if (selectedPriceRange !== 'all') {
25    const priceRange = priceRanges.find(p => p.id === selectedPriceRange)
26    if (priceRange) activeFilters.push({ type: 'price', label: priceRange.label, value: selectedPriceRange })
27  }
28  if (searchQuery) {
29    activeFilters.push({ type: 'search', label: `"${searchQuery}"`, value: searchQuery })
30  }
31 
32  const clearFilter = (type: string) => {
33    if (type === 'category') setSelectedCategory('all')
34    if (type === 'price') setSelectedPriceRange('all')
35    if (type === 'search') setSearchQuery('')
36  }
37 
38  const clearAllFilters = () => {
39    setSelectedCategory('all')
40    setSelectedPriceRange('all')
41    setSearchQuery('')
42  }
43 
44  return (
45    <section className="py-8">
46      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
47        <div className="mb-8">
48          <h2 className="text-3xl font-bold tracking-tight text-balance">Product Catalog</h2>
49          <p className="text-muted-foreground mt-2">
50            Browse our collection of {categories.find(c => c.id === selectedCategory)?.count || 1247} products
51          </p>
52        </div>
53 
54        <div className="mb-6 flex flex-col gap-4">
55          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
56            <div className="relative max-w-md flex-1">
57              <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
58              <Input
59// … truncated