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,
  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 url={url} description={`Avatar ${index + 1}`} />
      ))}
    </MediaGallery>,
  ];

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