A gallery of Thumbnails

Now we'll create a new brick which will be a gallery of thumbnails.

First of all, let's export the interface for our Thumbnail brick, adding "export" in front of the interface declaration, as we'll need to import it later in our gallery brick:

import { types, Text, RichText, Image } from 'react-bricks/rsc'

export interface ThumbnailProps {
  title: types.TextValue
  description: types.TextValue
  image: types.IImageSource
  hasShadow: boolean
  bgColor: types.IColor & { className: string }
}

The Gallery brick

Create a Gallery.tsx file inside the react-bricks/bricks directory.

import React from 'react'
import { types, Repeater } from 'react-bricks/rsc'

import { ThumbnailProps } from './Thumbnail'

interface GalleryProps {
  thumbnails: types.RepeaterItems<ThumbnailProps> 
}

const Gallery: types.Brick<GalleryProps> = ({ thumbnails }) => {
  return (
    <div className="max-w-5xl mx-auto py-8 px-4">
      <h1 className="text-4xl font-bold text-center">Gallery</h1>
      <div className="sm:grid grid-cols-3 gap-5">
        <Repeater propName="thumbnails" items={thumbnails} />
      </div>
    </div>
  )
}

Gallery.schema = {
  name: 'gallery',
  label: 'Gallery',
  repeaterItems: [ 
    {
      name: 'thumbnails',
      itemType: 'thumbnail',
      itemLabel: 'Thumbnail',
      max: 3,
    },
  ],
}

export default Gallery

Here you see two interesting things. The first is the new <Repeater> component. The second is the repeaterItems property in the schema. Let's see how both work.

The `Repeater` component

The <Repeater> component is a "slot" where the nested bricks will be repeated.

The propName prop is required to know which prop contains the items to be repeated.

Other interesting props are renderWrapper to render a wrapper around all the items only when there is at least an item, renderItemWrapper to add a wrapper around each item and itemProps to pass some prop down to all the items (see the docs in the reference below).

`repeaterItems` in schema

repeaterItems is an array containing props for repeating items.

Each object within this array has a name prop, an itemType which indicates the type of brick to repeat, and an itemLabel for the "Add" menu (if not provided, the repeated brick's label is used). You can also specify the min and max number of items. In this example, we've set a maximum of 3 thumbnails for our gallery.

The result

You see that when you add this block there are no thumbnails, because we didn't specify any default for the "thumbnails" prop. You can do it as an exercise, using the Playground as a helper.

When the block is selected, you see that you have a button on the right sidebar to add a new Thumbnail in its default configuration.

When you click on a single Thumbnail you may remove it or change its props.

Hide the single Thumbnail from the Add menu

In cases like this one, you usually don't want the single Thumbnail brick to be added directly on the page. The user should be able only to add a Gallery brick and then add Thumbnails inside of the Gallery.

To do this you need to set the hideFromAddMenu property to the Thumbnail's schema.

Thumbnail.schema = {
  name: 'thumbnail',
  label: 'Thumbnail',
  hideFromAddMenu: true, 
  ...
}

Great! Now you are a guru of React Bricks.

You know almost anything you should need, and you can easily find any missing piece in the Docs. Well done!