PRODUCTGALLERY COMPONENT

Display multiple products in various layouts with filtering, pagination, and sorting options.

PROPS

Prop	Type	Default	Description
products	Product[]	-	Array of products to display
layout	'grid' \| 'list' \| 'carousel'	'grid'	Display layout style
loading	boolean	false	Show loading skeletons
onProductClick	(product) => void	-	Callback when product is clicked
pagination	boolean	false	Enable pagination controls

Variants

Grid Layout with Filters

Classic Band Tee

€ 29,99

Limited Edition Tour Tee

€ 34,99

Premium Logo Hoodie

€ 59,99

Embroidered Dad Hat

€ 24,99

Canvas Tote Bag

€ 19,99

Latest Album - Limited Vinyl

€ 39,99

1<ProductGallery
2  products={products}
3  layout="grid"
4  pagination
5  filters={{
6    categories: ['apparel', 'accessories', 'music']
7  }}
8  onProductClick={(product) => router.push(`/products/${product.id}`)}
9/>

Carousel Layout

Latest Album - Limited Vinyl

Limited edition colored vinyl. Includes digital download code. Only 1000 pressed.

€ 39,99

1 / 5

1<ProductGallery
2  products={featuredProducts}
3  layout="carousel"
4  autoPlay
5  interval={5000}
6/>

Loading State

Empty State

No products found

Try adjusting your filters or search criteria

USAGE EXAMPLES

BASIC GALLERY

Simple product gallery with grid layout

1import { ProductGallery } from '@/components/fanbace/product-gallery';
2import { useProducts } from '@/lib/sdk';
3 
4export default function StorePage() {
5  const { products, loading } = useProducts();
6 
7  return (
8    <div>
9      <h1>Our Products</h1>
10      <ProductGallery
11        products={products}
12        loading={loading}
13        layout="grid"
14      />
15    </div>
16  );
17}

WITH FILTERING AND SORTING

Advanced gallery with category filters and sorting

1import { ProductGallery } from '@/components/fanbace/product-gallery';
2import { useState } from 'react';
3 
4export default function AdvancedGallery() {
5  const [category, setCategory] = useState<string | null>(null);
6  const [sortBy, setSortBy] = useState<'price' | 'name'>('name');
7 
8  return (
9    <ProductGallery
10      products={products}
11      filters={{
12        category,
13        onCategoryChange: setCategory,
14      }}
15      sorting={{
16        sortBy,
17        onSortChange: setSortBy,
18      }}
19      pagination={{
20        pageSize: 12,
21        showControls: true,
22      }}
23    />
24  );
25}