Media Gallery

The MediaGallery component allows you to display multiple media items in a grid layout.

Basic usage

src/app/commands/gallery-example.tsx

import type { ChatInputCommand } from 'commandkit';
import {
  MediaGallery,
  MediaGalleryItem,
  TextDisplay,
} from 'commandkit';
import { MessageFlags } from 'discord.js';

export const chatInput: ChatInputCommand = async ({
  interaction,
}) => {
  const images = [
    'https://cdn.discordapp.com/embed/avatars/0.png',
    'https://cdn.discordapp.com/embed/avatars/1.png',
    'https://cdn.discordapp.com/embed/avatars/2.png',
  ];

  const components = [
    <TextDisplay content="# Discord Avatars Gallery" />,
    <MediaGallery>
      {images.map((url, index) => (
        <MediaGalleryItem
          key={index}
          url={url}
          description={`Avatar ${index + 1}`}
        />
      ))}
    </MediaGallery>,
  ];

  await interaction.reply({
    components: components,
    flags: MessageFlags.IsComponentsV2,
  });
};