OUR STORES COMPONENT

Display multiple stores in grid or list layout with search and filtering.

PROPS

PropTypeDescription
storesStore[]Array of stores to display
layout'grid' | 'list'Display layout
searchablebooleanEnable search functionality
onStoreClick(store) => voidStore click handler

Interactive Example

Official Band Store

Exclusive band merchandise

24 products

Tour Collection

Limited tour items

12 products

Vinyl Records

Complete discography

8 products

Apparel Shop

Clothing and accessories

45 products
1<StoreList
2  stores={stores}
3  layout="grid"
4  searchable
5  onStoreClick={(store) => router.push(`/stores/${store.id}`)}
6/>

USAGE EXAMPLES

COMPLETE IMPLEMENTATION

1import { OurStores } from '@/components/fanbace/store';
2import { useStores } from '@/lib/sdk';
3 
4export default function StoresPage() {
5  const { stores, loading } = useStores();
6 
7  return (
8    <div>
9      <h1>Explore Stores</h1>
10      <OurStores
11        stores={stores}
12        loading={loading}
13        layout="grid"
14        searchable
15      />
16    </div>
17  );
18}