@thorprovider/blocks 0.1.0

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

@@ -0,0 +1,341 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { SlidersHorizontal } from 'lucide-react'
+
+import { Button } from '../../../ui/button'
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+} from '../../../ui/pagination'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../../ui/select'
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '../../../ui/sheet'
+import { cn } from '../../../lib/utils'
+
+import { CategoryFilter2FilterPanel } from './category-filter-2-filter-panel'
+
+export interface FilterProduct {
+  id: string
+  name: string
+  price: string
+  image: string
+}
+
+export interface CategoryFilter2Category {
+  id: string
+  label: string
+}
+
+export interface CategoryFilter2Color {
+  id: string
+  color: string
+}
+
+export interface CategoryFilter2PriceRange {
+  min: number
+  max: number
+  step: number
+}
+
+export interface CategoryFilter2SortOption {
+  value: string
+  label: string
+}
+
+export interface CategoryFilter2Filters {
+  categories: string[]
+  priceRange: number[]
+  size: string | null
+  color: string | null
+}
+
+export interface CategoryFilter2Props {
+  products: FilterProduct[]
+  categories?: CategoryFilter2Category[]
+  sizes?: string[]
+  colors?: CategoryFilter2Color[]
+  priceRange?: CategoryFilter2PriceRange
+  viewOptions?: (number | string)[]
+  sortOptions?: CategoryFilter2SortOption[]
+  pagination?: (number | string)[]
+  filtersTitle?: string
+  selectedText?: string
+  clearAllLabel?: string
+  priceRangeTitle?: string
+  minLabel?: string
+  maxLabel?: string
+  categoriesTitle?: string
+  sizesTitle?: string
+  colorsTitle?: string
+  viewLabel?: string
+  viewPlaceholder?: string
+  sortPlaceholder?: string
+  productsTitle?: string
+  currentLabel?: string
+  onProductClick?: (product: FilterProduct) => void
+  onPageChange?: (page: number | string) => void
+  onViewChange?: (view: number | string) => void
+  onSortChange?: (sort: string) => void
+  onFilterChange?: (filters: CategoryFilter2Filters) => void
+}
+
+const DEFAULT_VIEW_OPTIONS: (number | string)[] = [10, 25, 50, 100]
+const DEFAULT_SORT_OPTIONS: CategoryFilter2SortOption[] = [
+  { value: 'newest', label: 'Más recientes' },
+  { value: 'price-asc', label: 'Precio: de menor a mayor' },
+  { value: 'price-desc', label: 'Precio: de mayor a menor' },
+]
+const DEFAULT_PRICE_RANGE: CategoryFilter2PriceRange = { min: 0, max: 1000, step: 10 }
+
+export function CategoryFilter2({
+  products,
+  categories = [],
+  sizes = [],
+  colors = [],
+  priceRange: priceRangeConfig = DEFAULT_PRICE_RANGE,
+  viewOptions = DEFAULT_VIEW_OPTIONS,
+  sortOptions = DEFAULT_SORT_OPTIONS,
+  pagination = [],
+  filtersTitle = 'Filtros',
+  selectedText = 'Filtros',
+  clearAllLabel = 'Restablecer',
+  priceRangeTitle = 'Rango de precio',
+  minLabel = 'Mínimo',
+  maxLabel = 'Máximo',
+  categoriesTitle = 'Categoría',
+  sizesTitle = 'Tamaño',
+  colorsTitle = 'Color',
+  viewLabel = 'Ver',
+  viewPlaceholder = 'Seleccionar',
+  sortPlaceholder = 'Ordenar por',
+  productsTitle = 'Productos',
+  currentLabel = '(actual)',
+  onProductClick,
+  onPageChange,
+  onViewChange,
+  onSortChange,
+  onFilterChange,
+}: CategoryFilter2Props) {
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
+  const [priceRange, setPriceRange] = useState<number[]>([priceRangeConfig.min, priceRangeConfig.max])
+  const [selectedSize, setSelectedSize] = useState<string | null>(null)
+  const [selectedColor, setSelectedColor] = useState<string | null>(null)
+  const [selectedView, setSelectedView] = useState<number | string>(viewOptions[0] ?? 10)
+  const [selectedSort, setSelectedSort] = useState<string>(sortOptions[0]?.value ?? 'newest')
+  const [activePage, setActivePage] = useState<number | string | null>(pagination.length > 0 ? pagination[0] : null)
+  const [isSheetOpen, setIsSheetOpen] = useState(false)
+
+  // Close sheet when screen size becomes large using CSS media query
+  useEffect(() => {
+    const mediaQuery = window.matchMedia('(min-width: 1024px)')
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      if (e.matches) {
+        setIsSheetOpen(false)
+      }
+    }
+
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [])
+
+  const handleCategoryChange = (category: string, checked: boolean) => {
+    const next = checked ? [...selectedCategories, category] : selectedCategories.filter(c => c !== category)
+    setSelectedCategories(next)
+    onFilterChange?.({ categories: next, priceRange, size: selectedSize, color: selectedColor })
+  }
+
+  const handlePriceChange = (next: number[]) => {
+    setPriceRange(next)
+    onFilterChange?.({ categories: selectedCategories, priceRange: next, size: selectedSize, color: selectedColor })
+  }
+
+  const handleSizeChange = (size: string | null) => {
+    setSelectedSize(size)
+    onFilterChange?.({ categories: selectedCategories, priceRange, size, color: selectedColor })
+  }
+
+  const handleColorChange = (color: string | null) => {
+    setSelectedColor(color)
+    onFilterChange?.({ categories: selectedCategories, priceRange, size: selectedSize, color })
+  }
+
+  const handleClearAll = () => {
+    setSelectedCategories([])
+    setSelectedSize(null)
+    setSelectedColor(null)
+    setPriceRange([priceRangeConfig.min, priceRangeConfig.max])
+    onFilterChange?.({ categories: [], priceRange: [priceRangeConfig.min, priceRangeConfig.max], size: null, color: null })
+  }
+
+  const handleViewChange = (view: number | string) => {
+    setSelectedView(view)
+    onViewChange?.(view)
+  }
+
+  const handleSortChange = (sort: string) => {
+    setSelectedSort(sort)
+    onSortChange?.(sort)
+  }
+
+  const handlePageChange = (page: number | string) => {
+    if (page === '...') return
+    setActivePage(page)
+    onPageChange?.(page)
+  }
+
+  const filterPanelProps = {
+    selectedText,
+    clearAllLabel,
+    priceRangeTitle,
+    priceRange,
+    priceRangeConfig,
+    minLabel,
+    maxLabel,
+    categoriesTitle,
+    categories,
+    selectedCategories,
+    onCategoryChange: handleCategoryChange,
+    onPriceChange: handlePriceChange,
+    sizesTitle,
+    sizes,
+    selectedSize,
+    onSizeChange: handleSizeChange,
+    colorsTitle,
+    colors,
+    selectedColor,
+    onColorChange: handleColorChange,
+    onClearAll: handleClearAll,
+  }
+
+  return (
+    <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <div className="flex flex-col gap-8 lg:flex-row">
+        <aside className="hidden w-full flex-none lg:block lg:w-72">
+          <div className="max-h-100vh sticky top-4 overflow-y-auto">
+            <div className="flex flex-col gap-6 pb-6">
+              <CategoryFilter2FilterPanel {...filterPanelProps} />
+            </div>
+          </div>
+        </aside>
+
+        <main className="flex min-w-0 flex-1 flex-col gap-6">
+          <div className="flex flex-wrap items-center justify-between gap-4">
+            <div className="flex items-center gap-4">
+              <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  className="h-8 cursor-pointer px-3 text-xs lg:hidden"
+                  onClick={() => setIsSheetOpen(true)}
+                >
+                  <SlidersHorizontal />
+                  {filtersTitle}
+                </Button>
+                <SheetContent side="left" className="w-full p-0 sm:w-[380px] lg:hidden">
+                  <SheetHeader className="border-b px-6 py-4">
+                    <SheetTitle className="text-lg">{filtersTitle}</SheetTitle>
+                  </SheetHeader>
+                  <div className="h-[calc(100vh-4rem)] overflow-y-auto p-6">
+                    <div className="flex flex-col gap-6">
+                      <CategoryFilter2FilterPanel {...filterPanelProps} />
+                    </div>
+                  </div>
+                </SheetContent>
+              </Sheet>
+              <div className="hidden items-center gap-2 sm:flex">
+                <span className="text-sm">{viewLabel}</span>
+                <Select
+                  value={String(selectedView)}
+                  onValueChange={value => handleViewChange(viewOptions.find(option => String(option) === value) ?? value)}
+                >
+                  <SelectTrigger className="h-8 w-[100px]" aria-label={viewLabel}>
+                    <SelectValue placeholder={viewPlaceholder} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {viewOptions.map(option => (
+                      <SelectItem key={option} value={String(option)}>
+                        {option}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <div className="flex items-center gap-4">
+              <Select value={selectedSort} onValueChange={handleSortChange}>
+                <SelectTrigger className="h-8 w-[180px]" aria-label={sortPlaceholder}>
+                  <SelectValue placeholder={sortPlaceholder} />
+                </SelectTrigger>
+                <SelectContent>
+                  {sortOptions.map(option => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+
+          <section aria-labelledby="products-heading" className="flex flex-col gap-6">
+            <h2 id="products-heading" className="sr-only">
+              {productsTitle}
+            </h2>
+            <ul className="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3">
+              {products.map(product => (
+                <li key={product.id} className="group">
+                  <article
+                    className={cn('flex h-full flex-col gap-2', onProductClick && 'cursor-pointer')}
+                    onClick={onProductClick ? () => onProductClick(product) : undefined}
+                  >
+                    <div className="relative aspect-3/4 overflow-hidden rounded-lg">
+                      <img
+                        src={product.image || undefined}
+                        alt={product.name}
+                        className="size-full object-cover transition-transform duration-300 group-hover:scale-105"
+                        width={300}
+                        height={400}
+                        loading="lazy"
+                      />
+                    </div>
+                    <h3 className="text-sm font-medium text-balance">{product.name}</h3>
+                    <p className="text-sm font-semibold">{product.price}</p>
+                  </article>
+                </li>
+              ))}
+            </ul>
+
+            {pagination.length > 0 ? (
+              <Pagination aria-label="Paginación">
+                <PaginationContent>
+                  {pagination.map((page, index) =>
+                    page === '...' ? (
+                      <PaginationEllipsis key={`${page}-${index}`} />
+                    ) : (
+                      <PaginationItem key={page}>
+                        <PaginationLink
+                          isActive={activePage === page}
+                          className="size-8 cursor-pointer p-0"
+                          onClick={() => handlePageChange(page)}
+                        >
+                          {page}
+                          {activePage === page && <span className="sr-only">{currentLabel}</span>}
+                        </PaginationLink>
+                      </PaginationItem>
+                    )
+                  )}
+                </PaginationContent>
+              </Pagination>
+            ) : null}
+          </section>
+        </main>
+      </div>
+    </div>
+  )
+}
+
+export default CategoryFilter2

package/src/blocks/e-commerce/category-filters/category-filter-4-chip-rail.tsx

@@ -0,0 +1,57 @@
+'use client'
+
+import { X } from 'lucide-react'
+
+import { Badge } from '../../../ui/badge'
+import { Button } from '../../../ui/button'
+import type { CategoryFilter4FilterState } from './category-filter-4'
+
+interface CategoryFilter4ChipRailProps {
+  filters: CategoryFilter4FilterState
+  onChange: (next: CategoryFilter4FilterState) => void
+  empty: CategoryFilter4FilterState
+  clearAllLabel?: string
+}
+
+export function CategoryFilter4ChipRail({
+  filters,
+  onChange,
+  empty,
+  clearAllLabel = 'Borrar todos',
+}: CategoryFilter4ChipRailProps) {
+  type Chip = { label: string; clear: () => void }
+  const chips: Chip[] = [
+    ...filters.modelTypes.map(v => ({ label: v, clear: () => onChange({ ...filters, modelTypes: filters.modelTypes.filter(x => x !== v) }) })),
+    ...filters.rangeBands.map(v => ({ label: v, clear: () => onChange({ ...filters, rangeBands: filters.rangeBands.filter(x => x !== v) }) })),
+    ...filters.frameSizes.map(v => ({ label: `Talla ${v}`, clear: () => onChange({ ...filters, frameSizes: filters.frameSizes.filter(x => x !== v) }) })),
+    ...filters.colourways.map(v => ({ label: v, clear: () => onChange({ ...filters, colourways: filters.colourways.filter(x => x !== v) }) })),
+    ...filters.features.map(v => ({ label: v, clear: () => onChange({ ...filters, features: filters.features.filter(x => x !== v) }) })),
+  ]
+
+  if (filters.priceMax < empty.priceMax) {
+    chips.push({
+      label: `Menos de $${filters.priceMax.toLocaleString()}`,
+      clear: () => onChange({ ...filters, priceMax: empty.priceMax }),
+    })
+  }
+
+  if (chips.length === 0) return null
+
+  return (
+    <div className="flex items-center gap-1.5 overflow-x-auto pb-1" role="group" aria-label="Filtros aplicados">
+      {chips.map(chip => (
+        <Badge key={chip.label} variant="secondary" className="shrink-0 gap-1">
+          {chip.label}
+          <button type="button" aria-label={`Eliminar filtro: ${chip.label}`} onClick={chip.clear}>
+            <X className="size-3" />
+          </button>
+        </Badge>
+      ))}
+      <Button variant="ghost" size="sm" className="shrink-0" onClick={() => onChange(empty)}>
+        {clearAllLabel}
+      </Button>
+    </div>
+  )
+}
+
+export default CategoryFilter4ChipRail

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

@@ -0,0 +1,124 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { animate, useReducedMotion } from 'motion/react'
+
+import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from '../../../ui/drawer'
+import { Button } from '../../../ui/button'
+import type {
+  CategoryFilter4Facets,
+  CategoryFilter4FilterState,
+} from './category-filter-4'
+import { CategoryFilter4Fields } from './category-filter-4-fields'
+
+interface CategoryFilter4DrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  filters: CategoryFilter4FilterState
+  onChange: (next: CategoryFilter4FilterState) => void
+  countWith: (partial: Partial<CategoryFilter4FilterState>) => number
+  resultCount: number
+  empty: CategoryFilter4FilterState
+  facets: CategoryFilter4Facets
+  colourNames: Record<string, string>
+  filtersLabel?: string
+  modelTypeLabel?: string
+  rangeLabel?: string
+  frameSizeLabel?: string
+  colourLabel?: string
+  featuresLabel?: string
+  clearAllLabel?: string
+  showResultsLabel?: (count: number) => string
+  noResultsLabel?: string
+  noResultsDescription?: string
+}
+
+export function CategoryFilter4Drawer({
+  open,
+  onOpenChange,
+  filters,
+  onChange,
+  countWith,
+  resultCount,
+  empty,
+  facets,
+  colourNames,
+  filtersLabel = 'Filtros',
+  modelTypeLabel,
+  rangeLabel,
+  frameSizeLabel,
+  colourLabel,
+  featuresLabel,
+  clearAllLabel = 'Borrar todos',
+  showResultsLabel = count => `Mostrar ${count} ${count === 1 ? 'producto' : 'productos'}`,
+  noResultsLabel = 'Sin coincidencias',
+  noResultsDescription = 'Prueba a relajar alguno de los filtros aplicados.',
+}: CategoryFilter4DrawerProps) {
+  const reduceMotion = useReducedMotion()
+  const [displayCount, setDisplayCount] = useState(resultCount)
+  const prevRef = useRef(resultCount)
+
+  useEffect(() => {
+    if (reduceMotion) {
+      setDisplayCount(resultCount)
+      return
+    }
+    const controls = animate(prevRef.current, resultCount, { duration: 0.3, onUpdate: v => setDisplayCount(Math.round(v)) })
+    prevRef.current = resultCount
+    return () => controls.stop()
+  }, [resultCount, reduceMotion])
+
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      {/*
+        No height override. `DrawerContent` already ships `h-auto` with a `max-h-[80vh]` cap for
+        a bottom drawer, which is exactly the behaviour wanted: grow to the filters, stop before
+        swallowing the screen. Forcing `h-[88vh]` made it that tall whatever it held, so a short
+        filter set left a half-screen of blank between the last checkbox and the footer.
+
+        `min-h-0` on the scroller because a flex child defaults to `min-height: auto` — it
+        refuses to shrink below its content, so without it a tall filter set pushes the footer
+        off the bottom instead of scrolling inside.
+      */}
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>{filtersLabel}</DrawerTitle>
+        </DrawerHeader>
+        <div className="min-h-0 flex-1 overflow-y-auto px-4">
+          <CategoryFilter4Fields
+            filters={filters}
+            onChange={onChange}
+            countWith={countWith}
+            facets={facets}
+            colourNames={colourNames}
+            modelTypeLabel={modelTypeLabel}
+            rangeLabel={rangeLabel}
+            frameSizeLabel={frameSizeLabel}
+            colourLabel={colourLabel}
+            featuresLabel={featuresLabel}
+          />
+        </div>
+        <div className="flex items-center gap-2 border-t p-4 pb-[max(1rem,env(safe-area-inset-bottom))]">
+          <Button variant="ghost" onClick={() => onChange(empty)}>
+            {clearAllLabel}
+          </Button>
+          <Button
+            className="flex-1"
+            disabled={resultCount === 0}
+            aria-describedby={resultCount === 0 ? 'category-filter-4-zero-reason' : undefined}
+            onClick={() => onOpenChange(false)}
+          >
+            {resultCount === 0 ? noResultsLabel : showResultsLabel(displayCount)}
+          </Button>
+        </div>
+        {resultCount === 0 ? (
+          <p id="category-filter-4-zero-reason" className="text-destructive px-4 pb-2 text-xs">
+            {noResultsDescription}
+          </p>
+        ) : null}
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+export default CategoryFilter4Drawer

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

@@ -0,0 +1,170 @@
+'use client'
+
+import { Label } from '../../../ui/label'
+import { CheckboxCheck } from '../checkout-forms/checkbox-check'
+import type {
+  CategoryFilter4Facets,
+  CategoryFilter4FilterState,
+} from './category-filter-4'
+
+interface CategoryFilter4FieldsProps {
+  filters: CategoryFilter4FilterState
+  onChange: (next: CategoryFilter4FilterState) => void
+  countWith: (partial: Partial<CategoryFilter4FilterState>) => number
+  facets: CategoryFilter4Facets
+  colourNames: Record<string, string>
+  modelTypeLabel?: string
+  rangeLabel?: string
+  frameSizeLabel?: string
+  colourLabel?: string
+  featuresLabel?: string
+}
+
+export function CategoryFilter4Fields({
+  filters,
+  onChange,
+  countWith,
+  facets,
+  colourNames,
+  modelTypeLabel = 'Tipo de modelo',
+  rangeLabel = 'Autonomía',
+  frameSizeLabel = 'Talla de cuadro',
+  colourLabel = 'Color',
+  featuresLabel = 'Características',
+}: CategoryFilter4FieldsProps) {
+  function toggle<K extends 'modelTypes' | 'rangeBands' | 'frameSizes' | 'colourways' | 'features'>(
+    key: K,
+    value: string
+  ) {
+    const list = filters[key] as string[]
+    const next = list.includes(value) ? list.filter(v => v !== value) : [...list, value]
+    onChange({ ...filters, [key]: next })
+  }
+
+  const colourways = Object.keys(colourNames)
+
+  return (
+    <div className="flex flex-col gap-6">
+      <fieldset>
+        <legend className="mb-2 text-sm font-medium">{modelTypeLabel}</legend>
+        <div className="flex flex-col gap-2">
+          {facets.modelTypes.map(option => {
+            const count = countWith({
+              modelTypes: filters.modelTypes.includes(option.value)
+                ? filters.modelTypes
+                : [...filters.modelTypes, option.value],
+            })
+            const zero = count === 0 && !filters.modelTypes.includes(option.value)
+            return (
+              <div key={option.value} className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <CheckboxCheck
+                    id={`model-${option.value}`}
+                    checked={filters.modelTypes.includes(option.value)}
+                    disabled={zero}
+                    onCheckedChange={() => toggle('modelTypes', option.value)}
+                  />
+                  <Label htmlFor={`model-${option.value}`} className="font-normal">
+                    {option.label}
+                  </Label>
+                </div>
+                <span className="text-muted-foreground text-xs tabular-nums">{count}</span>
+              </div>
+            )
+          })}
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend className="mb-2 text-sm font-medium">{rangeLabel}</legend>
+        <div className="flex flex-col gap-2">
+          {facets.rangeBands.map(band => {
+            const count = countWith({
+              rangeBands: filters.rangeBands.includes(band.value)
+                ? filters.rangeBands
+                : [...filters.rangeBands, band.value],
+            })
+            const zero = count === 0 && !filters.rangeBands.includes(band.value)
+            return (
+              <div key={band.value} className="flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <CheckboxCheck
+                    id={`range-${band.value}`}
+                    checked={filters.rangeBands.includes(band.value)}
+                    disabled={zero}
+                    onCheckedChange={() => toggle('rangeBands', band.value)}
+                  />
+                  <Label htmlFor={`range-${band.value}`} className="font-normal">
+                    {band.label}
+                  </Label>
+                </div>
+                <span className="text-muted-foreground text-xs tabular-nums">{count}</span>
+              </div>
+            )
+          })}
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend className="mb-2 text-sm font-medium">{frameSizeLabel}</legend>
+        <div className="flex flex-wrap gap-2">
+          {facets.frameSizes.map(size => {
+            const active = filters.frameSizes.includes(size)
+            return (
+              <button
+                key={size}
+                type="button"
+                aria-pressed={active}
+                onClick={() => toggle('frameSizes', size)}
+                className="focus-visible:ring-ring/50 min-h-11 min-w-11 rounded-full border px-3 text-sm font-medium transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none aria-pressed:border-primary aria-pressed:bg-primary aria-pressed:text-primary-foreground border-input hover:bg-accent/50"
+              >
+                {size}
+              </button>
+            )
+          })}
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend className="mb-2 text-sm font-medium">{colourLabel}</legend>
+        <div className="flex flex-wrap gap-2">
+          {colourways.map(colour => {
+            const active = filters.colourways.includes(colour)
+            return (
+              <button
+                key={colour}
+                type="button"
+                aria-pressed={active}
+                onClick={() => toggle('colourways', colour)}
+                className="focus-visible:ring-ring/50 flex min-h-11 items-center gap-1.5 rounded-full border px-3 text-sm transition-colors duration-150 focus-visible:ring-2 focus-visible:outline-none aria-pressed:border-primary aria-pressed:bg-primary/10 border-input hover:bg-accent/50"
+              >
+                <span aria-hidden="true" className="bg-muted-foreground/30 size-3 rounded-full" />
+                {colourNames[colour]}
+              </button>
+            )
+          })}
+        </div>
+      </fieldset>
+
+      <fieldset>
+        <legend className="mb-2 text-sm font-medium">{featuresLabel}</legend>
+        <div className="flex flex-col gap-2">
+          {facets.featureOptions.map(option => (
+            <div key={option.value} className="flex items-center gap-2">
+              <CheckboxCheck
+                id={`feature-${option.value}`}
+                checked={filters.features.includes(option.value)}
+                onCheckedChange={() => toggle('features', option.value)}
+              />
+              <Label htmlFor={`feature-${option.value}`} className="font-normal">
+                {option.label}
+              </Label>
+            </div>
+          ))}
+        </div>
+      </fieldset>
+    </div>
+  )
+}
+
+export default CategoryFilter4Fields