feat: add thumbnail element

Author: twlite

apps/test-bot/src/app/commands/(general)/components.tsx

@@ -12,6 +12,7 @@ import CommandKit, {
   Section,
   Separator,
   TextDisplay,
+  Thumbnail,
 } from 'commandkit';
 import {
   AttachmentBuilder,
@@ -53,12 +54,16 @@ export const chatInput: ChatInputCommand = async (ctx) => {
       <TextDisplay content="# CommandKit Components v2 test" />
       <Section>
         <TextDisplay content="This is a section" />
+        <Thumbnail url="https://cdn.discordapp.com/embed/avatars/0.png" />
+      </Section>
+      <Separator spacing={SeparatorSpacingSize.Large} />
+      <Section>
+        <TextDisplay content="This is after separator" />
         <Button url="https://commandkit.dev" style={ButtonStyle.Link}>
           Website
         </Button>
       </Section>
-      <Separator spacing={SeparatorSpacingSize.Large} />
-      <TextDisplay content="This is after separator" />
+      <Separator spacing={SeparatorSpacingSize.Large} dividier />
       <File url="attachment://components-v2-are-awesome.md" />
       <Separator spacing={SeparatorSpacingSize.Large} dividier />
       <TextDisplay content="Discord's default avatars" />

packages/commandkit/src/components/v2/container.ts

@@ -8,6 +8,7 @@ import {
   SectionBuilder,
   SeparatorBuilder,
   TextDisplayBuilder,
+  ThumbnailBuilder,
 } from 'discord.js';
 import { applyId } from './common';
 

packages/commandkit/src/components/v2/section.ts

@@ -1,8 +1,5 @@
-// import { TextDisplayBuilder, TextDisplayComponentData } from 'discord.js';
-
 import {
   ButtonBuilder,
-  ComponentBuilder,
   SectionBuilder,
   TextDisplayBuilder,
   ThumbnailBuilder,
@@ -33,3 +30,21 @@ export function Section(props: SectionProps): SectionBuilder {
 
   return section;
 }
+
+export interface ThumbnailProps {
+  id?: number;
+  description?: string;
+  spoiler?: boolean;
+  url: string;
+}
+
+export function Thumbnail(props: ThumbnailProps) {
+  const thumbnail = new ThumbnailBuilder({
+    description: props.description,
+    spoiler: props.spoiler,
+    id: props.id,
+    media: { url: props.url },
+  });
+
+  return thumbnail;
+}