@thorprovider/blocks 0.1.0

package/src/blocks/e-commerce/category-filters/category-filter-1.tsx

@@ -0,0 +1,260 @@
+'use client'
+
+import { useState } from 'react'
+import { ChevronDown, Search, SlidersHorizontal, X } from 'lucide-react'
+
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../../../ui/dropdown-menu'
+import { Input } from '../../../ui/input'
+import { cn } from '../../../lib/utils'
+
+export interface CategoryFilter1Category {
+  id: string
+  name: string
+  count: number
+}
+
+export interface CategoryFilter1PriceRange {
+  id: string
+  label: string
+  min: number
+  max: number | null
+}
+
+export interface CategoryFilter1SortOption {
+  id: string
+  label: string
+}
+
+export interface CategoryFilter1Filters {
+  category: string
+  priceRange: string
+  sort: string
+  search: string
+}
+
+export interface CategoryFilter1Props {
+  title?: string
+  description?: string
+  categories: CategoryFilter1Category[]
+  priceRanges: CategoryFilter1PriceRange[]
+  sortOptions: CategoryFilter1SortOption[]
+  onFilterChange?: (filters: CategoryFilter1Filters) => void
+}
+
+export function CategoryFilter1({
+  title,
+  description,
+  categories,
+  priceRanges,
+  sortOptions,
+  onFilterChange,
+}: CategoryFilter1Props) {
+  const [selectedCategory, setSelectedCategory] = useState('all')
+  const [selectedPriceRange, setSelectedPriceRange] = useState('all')
+  const [selectedSort, setSelectedSort] = useState('featured')
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const activeFilters: { type: string; label: string; value: string }[] = []
+  if (selectedCategory !== 'all') {
+    const category = categories.find(c => c.id === selectedCategory)
+    if (category) activeFilters.push({ type: 'category', label: category.name, value: selectedCategory })
+  }
+  if (selectedPriceRange !== 'all') {
+    const priceRange = priceRanges.find(p => p.id === selectedPriceRange)
+    if (priceRange) activeFilters.push({ type: 'price', label: priceRange.label, value: selectedPriceRange })
+  }
+  if (searchQuery) {
+    activeFilters.push({ type: 'search', label: `"${searchQuery}"`, value: searchQuery })
+  }
+
+  const selectedCategoryCount = categories.find(c => c.id === selectedCategory)?.count ?? 0
+
+  const clearFilter = (type: string) => {
+    let nextCategory = selectedCategory
+    let nextPrice = selectedPriceRange
+    let nextSearch = searchQuery
+    if (type === 'category') nextCategory = 'all'
+    if (type === 'price') nextPrice = 'all'
+    if (type === 'search') nextSearch = ''
+    setSelectedCategory(nextCategory)
+    setSelectedPriceRange(nextPrice)
+    setSearchQuery(nextSearch)
+    onFilterChange?.({ category: nextCategory, priceRange: nextPrice, sort: selectedSort, search: nextSearch })
+  }
+
+  const clearAllFilters = () => {
+    setSelectedCategory('all')
+    setSelectedPriceRange('all')
+    setSearchQuery('')
+    onFilterChange?.({ category: 'all', priceRange: 'all', sort: selectedSort, search: '' })
+  }
+
+  const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const next = e.target.value
+    setSearchQuery(next)
+    onFilterChange?.({ category: selectedCategory, priceRange: selectedPriceRange, sort: selectedSort, search: next })
+  }
+
+  const handleSortSelect = (id: string) => {
+    setSelectedSort(id)
+    onFilterChange?.({ category: selectedCategory, priceRange: selectedPriceRange, sort: id, search: searchQuery })
+  }
+
+  const handleCategorySelect = (id: string) => {
+    setSelectedCategory(id)
+    onFilterChange?.({ category: id, priceRange: selectedPriceRange, sort: selectedSort, search: searchQuery })
+  }
+
+  const handlePriceRangeSelect = (id: string) => {
+    setSelectedPriceRange(id)
+    onFilterChange?.({ category: selectedCategory, priceRange: id, sort: selectedSort, search: searchQuery })
+  }
+
+  return (
+    <section className="py-8">
+      <div className="mx-auto w-full max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="mb-8">
+          {title ? <h2 className="text-3xl font-bold tracking-tight text-balance">{title}</h2> : null}
+          {description ? <p className="text-muted-foreground mt-2">{description}</p> : null}
+          {!description && title ? (
+            <p className="text-muted-foreground mt-2">
+              Browse our collection of {selectedCategoryCount} products
+            </p>
+          ) : null}
+        </div>
+
+        <div className="mb-6 flex flex-col gap-4">
+          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+            <div className="relative max-w-md flex-1">
+              <Search className="text-muted-foreground absolute top-1/2 left-3 size-4 -translate-y-1/2" />
+              <Input
+                placeholder="Search products..."
+                value={searchQuery}
+                onChange={handleSearchChange}
+                className="h-9 pl-10"
+              />
+            </div>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" className="h-9 w-full cursor-pointer px-4 py-2 sm:w-auto">
+                  <SlidersHorizontal data-icon="inline-start" />
+                  Sort: {sortOptions.find(s => s.id === selectedSort)?.label}
+                  <ChevronDown data-icon="inline-end" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="w-56">
+                {sortOptions.map(option => (
+                  <DropdownMenuItem
+                    key={option.id}
+                    onClick={() => handleSortSelect(option.id)}
+                    className={selectedSort === option.id ? 'bg-accent' : ''}
+                  >
+                    {option.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          <div className="flex flex-wrap gap-3">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="h-8 cursor-pointer px-3 text-xs">
+                  Category: {categories.find(c => c.id === selectedCategory)?.name}
+                  <ChevronDown data-icon="inline-end" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-56">
+                {categories.map(category => (
+                  <DropdownMenuItem
+                    key={category.id}
+                    onClick={() => handleCategorySelect(category.id)}
+                    className={cn(selectedCategory === category.id && 'bg-accent')}
+                  >
+                    <div className="flex w-full items-center justify-between">
+                      <span>{category.name}</span>
+                      <Badge variant="secondary" className="px-2.5 py-0.5 text-xs font-semibold">
+                        {category.count}
+                      </Badge>
+                    </div>
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button variant="outline" size="sm" className="h-8 cursor-pointer px-3 text-xs">
+                  Price: {priceRanges.find(p => p.id === selectedPriceRange)?.label}
+                  <ChevronDown data-icon="inline-end" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="w-48">
+                {priceRanges.map(range => (
+                  <DropdownMenuItem
+                    key={range.id}
+                    onClick={() => handlePriceRangeSelect(range.id)}
+                    className={cn(selectedPriceRange === range.id && 'bg-accent')}
+                  >
+                    {range.label}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          {activeFilters.length > 0 ? (
+            <div className="flex flex-wrap items-center gap-2">
+              <span className="text-muted-foreground text-sm font-medium">Active filters:</span>
+              {activeFilters.map(filter => (
+                <Badge key={filter.type} variant="secondary" className="px-2.5 py-0.5 font-semibold">
+                  {filter.label}
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="!p-1 h-auto cursor-pointer text-inherit"
+                    onClick={() => clearFilter(filter.type)}
+                  >
+                    <X className="size-3" />
+                  </Button>
+                </Badge>
+              ))}
+              <DropdownMenuSeparator className="mx-2" />
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={clearAllFilters}
+                className="h-auto cursor-pointer p-1.5 text-xs text-muted-foreground"
+              >
+                Clear all
+              </Button>
+            </div>
+          ) : null}
+        </div>
+
+        <div className="bg-muted/50 rounded-lg border p-4">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <span className="text-sm font-medium">Showing {selectedCategoryCount} results</span>
+              {searchQuery && <span className="text-muted-foreground text-sm">for &quot;{searchQuery}&quot;</span>}
+            </div>
+            <div className="text-muted-foreground text-xs">
+              Sorted by {sortOptions.find(s => s.id === selectedSort)?.label}
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default CategoryFilter1

package/src/blocks/e-commerce/category-filters/category-filter-2-filter-panel.tsx

@@ -0,0 +1,179 @@
+'use client'
+
+import { useId } from 'react'
+
+import { Button } from '../../../ui/button'
+import { CardTitle } from '../../../ui/card'
+import { Input } from '../../../ui/input'
+import { CheckboxCheck } from '../checkout-forms/checkbox-check'
+
+import type {
+  CategoryFilter2Category,
+  CategoryFilter2Color,
+  CategoryFilter2PriceRange,
+} from './category-filter-2'
+
+interface CategoryFilter2FilterPanelProps {
+  selectedText?: string
+  clearAllLabel?: string
+  priceRangeTitle?: string
+  priceRange: number[]
+  priceRangeConfig: CategoryFilter2PriceRange
+  minLabel?: string
+  maxLabel?: string
+  categoriesTitle?: string
+  categories: CategoryFilter2Category[]
+  selectedCategories: string[]
+  onCategoryChange: (category: string, checked: boolean) => void
+  onPriceChange: (range: number[]) => void
+  sizesTitle?: string
+  sizes: string[]
+  selectedSize: string | null
+  onSizeChange: (size: string | null) => void
+  colorsTitle?: string
+  colors: CategoryFilter2Color[]
+  selectedColor: string | null
+  onColorChange: (color: string | null) => void
+  onClearAll: () => void
+}
+
+export function CategoryFilter2FilterPanel({
+  selectedText = 'Filtros',
+  clearAllLabel = 'Restablecer',
+  priceRangeTitle = 'Rango de precio',
+  priceRange,
+  priceRangeConfig,
+  minLabel = 'Mínimo',
+  maxLabel = 'Máximo',
+  categoriesTitle = 'Categoría',
+  categories,
+  selectedCategories,
+  onCategoryChange,
+  onPriceChange,
+  sizesTitle = 'Tamaño',
+  sizes,
+  selectedSize,
+  onSizeChange,
+  colorsTitle = 'Color',
+  colors,
+  selectedColor,
+  onColorChange,
+  onClearAll,
+}: CategoryFilter2FilterPanelProps) {
+  const priceInputId = useId()
+  const categoryInputId = useId()
+
+  return (
+    <>
+      <div className="flex flex-col gap-6">
+        <div className="mb-3 flex items-center justify-between">
+          <h1 className="font-semibold">{selectedText}</h1>
+          <Button variant="ghost" size="sm" className="h-8 cursor-pointer px-2 text-xs" onClick={onClearAll}>
+            {clearAllLabel}
+          </Button>
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-col gap-4">
+        <CardTitle className="font-semibold">{priceRangeTitle}</CardTitle>
+        <div className="flex items-center gap-3">
+          <div className="flex flex-1 flex-col gap-1">
+            <label htmlFor={`${priceInputId}-min`}>{minLabel}</label>
+            <Input
+              id={`${priceInputId}-min`}
+              type="number"
+              value={priceRange[0]}
+              onChange={e => {
+                const value = parseInt(e.target.value)
+                if (!isNaN(value) && value >= priceRangeConfig.min) {
+                  onPriceChange([value, priceRange[1]])
+                }
+              }}
+              min={priceRangeConfig.min}
+              max={priceRange[1]}
+              step={priceRangeConfig.step}
+              className="h-9"
+            />
+          </div>
+          <div className="mt-5 flex-none">-</div>
+          <div className="flex flex-1 flex-col gap-1">
+            <label htmlFor={`${priceInputId}-max`}>{maxLabel}</label>
+            <Input
+              id={`${priceInputId}-max`}
+              type="number"
+              value={priceRange[1]}
+              onChange={e => {
+                const value = parseInt(e.target.value)
+                if (!isNaN(value) && value <= priceRangeConfig.max) {
+                  onPriceChange([priceRange[0], value])
+                }
+              }}
+              min={priceRange[0]}
+              max={priceRangeConfig.max}
+              step={priceRangeConfig.step}
+              className="h-9"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-col gap-4">
+        <CardTitle className="font-semibold">{categoriesTitle}</CardTitle>
+        <div className="flex flex-col gap-2">
+          {categories.map(category => (
+            <div key={category.id} className="flex items-center gap-2">
+              <CheckboxCheck
+                id={`${categoryInputId}-${category.id}`}
+                checked={selectedCategories.includes(category.id)}
+                onCheckedChange={checked => onCategoryChange(category.id, checked as boolean)}
+              />
+              <label htmlFor={`${categoryInputId}-${category.id}`} className="text-sm">
+                {category.label}
+              </label>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-col gap-4">
+        <CardTitle className="font-semibold">{sizesTitle}</CardTitle>
+        <div className="flex flex-wrap gap-2">
+          {sizes.map(size => (
+            <Button
+              key={size}
+              variant={selectedSize === size ? 'default' : 'outline'}
+              size="sm"
+              className="h-8 cursor-pointer px-3 text-xs"
+              onClick={() => onSizeChange(size === selectedSize ? null : size)}
+              aria-pressed={selectedSize === size}
+            >
+              {size}
+            </Button>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-4 flex flex-col gap-4">
+        <CardTitle className="font-semibold">{colorsTitle}</CardTitle>
+        <div className="flex flex-wrap gap-2">
+          {colors.map(color => (
+            <Button
+              key={color.id}
+              onClick={() => onColorChange(color.id === selectedColor ? null : color.id)}
+              className={`relative size-8 cursor-pointer rounded-sm transition-transform duration-200 ${
+                selectedColor === color.id ? 'ring-primary scale-105 ring-2' : 'hover:ring-foreground/20 hover:ring-1'
+              } ${color.id === 'white' ? 'border-border border' : ''}`}
+              style={{ backgroundColor: color.color }}
+              aria-pressed={selectedColor === color.id}
+              aria-label={color.id}
+            >
+              {selectedColor === color.id && <div className="border-background absolute inset-0 rounded-sm border-2" />}
+            </Button>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}
+
+export default CategoryFilter2FilterPanel