# RemoteImageGroup

A component to display a group of RemoteImage components in a stack.

## Import

```tsx
import { RemoteImageGroup } from '@coinbase/cds-web/media/RemoteImageGroup'
```

## Examples

### Basic Usage

```tsx live
<RemoteImageGroup>
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.dai.imageUrl} />
  <RemoteImage source={assets.hbar.imageUrl} />
  <RemoteImage source={assets.ltc.imageUrl} />
  <RemoteImage source={assets.uni.imageUrl} />
</RemoteImageGroup>
```

### Max Items

```tsx live
<RemoteImageGroup max={4} size={32}>
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.btc.imageUrl} />
  <RemoteImage source={assets.dai.imageUrl} />
  <RemoteImage source={assets.hbar.imageUrl} />
  <RemoteImage source={assets.ltc.imageUrl} />
  <RemoteImage source={assets.uni.imageUrl} />
</RemoteImageGroup>
```

### Different Shapes

```tsx live
<RemoteImageGroup shape="circle" size="xxl">
  <RemoteImage shape="squircle" source={squareAssets.human1} />
  <RemoteImage source={assets.sushi.imageUrl} />
  <RemoteImage shape="squircle" source={squareAssets.human2} />
  <RemoteImage source={assets.ltc.imageUrl} />
</RemoteImageGroup>
```

### Different Sizes

Use the `size` prop to change the dimensions of the avatars in the group.

```tsx live
function Component() {
  const [size, setSize] = React.useState('m');
  const avatarSizes = ['s', 'm', 'l', 'xl', 'xxl', 'xxxl', 16, 24, 32];
  const options = avatarSizes.map((s) => ({ value: s, label: String(s) }));

  return (
    <VStack gap={2}>
      <Select
        labelVariant="inside"
        label="Image Size"
        value={size}
        onChange={setSize}
        options={options}
      />
      <RemoteImageGroup size={size}>
        <RemoteImage source={assets.eth.imageUrl} />
        <RemoteImage source={assets.btc.imageUrl} />
        <RemoteImage source={assets.dai.imageUrl} />
        <RemoteImage source={assets.hbar.imageUrl} />
      </RemoteImageGroup>
    </VStack>
  );
}
```

### Bordered Images

Use the `borderWidth` and `borderColor` props to change border style of the images in the group. `borderColor` defaults to `bg` when `borderWidth` is set.

```tsx live
<RemoteImageGroup borderWidth={300} max={3}>
  <RemoteImage source={assets.eth.imageUrl} />
  <RemoteImage source={assets.btc.imageUrl} />
  <RemoteImage source={assets.dai.imageUrl} />
  <RemoteImage source={assets.hbar.imageUrl} />
</RemoteImageGroup>
```

## Props

| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `borderColor` | `currentColor \| fg \| fgMuted \| fgInverse \| fgPrimary \| fgWarning \| fgPositive \| fgNegative \| bg \| bgAlternate \| bgInverse \| bgOverlay \| bgElevation1 \| bgElevation2 \| bgPrimary \| bgPrimaryWash \| bgSecondary \| bgTertiary \| bgSecondaryWash \| bgNegative \| bgNegativeWash \| bgPositive \| bgPositiveWash \| bgWarning \| bgWarningWash \| bgLine \| bgLineHeavy \| bgLineInverse \| bgLinePrimary \| bgLinePrimarySubtle \| accentSubtleRed \| accentBoldRed \| accentSubtleGreen \| accentBoldGreen \| accentSubtleBlue \| accentBoldBlue \| accentSubtlePurple \| accentBoldPurple \| accentSubtleYellow \| accentBoldYellow \| accentSubtleGray \| accentBoldGray \| transparent` | No | `borderWidth ? 'bg' : undefined` | - |
| `borderWidth` | `0 \| 100 \| 200 \| 300 \| 400 \| 500` | No | `-` | - |
| `children` | `null \| string \| number \| false \| true \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal` | No | `-` | Children content |
| `max` | `number` | No | `4` | Indicates the number of remote image before it collapses |
| `shape` | `rectangle \| circle \| squircle \| square \| hexagon` | No | `circle` | Shape of all RemoteImage children in the group |
| `size` | `number \| AvatarSize` | No | `m` | Size of all RemoteImage children in the group. |
| `testID` | `string` | No | `-` | Used to locate this element in unit and end-to-end tests. Under the hood, testID translates to data-testid on Web. On Mobile, testID stays the same - testID |