@coinbase/cds-mcp-server 8.17.2 → 8.17.3

package/mcp-docs/web/components/RemoteImageGroup.txt

@@ -0,0 +1,87 @@
+# RemoteImageGroup
+
+A component to display a group of RemoteImage components in a stack.
+
+## Import
+
+```jsx
+import { RemoteImageGroup } from '@coinbase/cds-web/media/RemoteImageGroup'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `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 |
+
+
+## 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) => <SelectOption key={s} title={s} value={s} />);
+
+  return (
+    <VStack gap={2}>
+      <Select width={240} labelVariant="inside" label="Image Size" value={size} onChange={setSize}>
+        {options}
+      </Select>
+      <RemoteImageGroup size={size}>
+        <RemoteImage source={assets.eth.imageUrl} />
+        <RemoteImage source={assets.btc.imageUrl} />
+        <RemoteImage source={assets.dai.imageUrl} />
+        <RemoteImage source={assets.hbar.imageUrl} />
+      </RemoteImageGroup>
+    </>
+  );
+}
+```
+
+