docs: update component examples

Author: notunderctrl

apps/test-bot/src/app/commands/(interactions)/commandkit.tsx

@@ -17,8 +17,10 @@ import {
   Separator,
   MediaGallery,
   MediaGalleryItem,
+  File,
 } from 'commandkit';
 import {
+  AttachmentBuilder,
   ButtonStyle,
   Colors,
   MessageFlags,
@@ -59,23 +61,22 @@ export const command: CommandData = {
 // }
 
 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 fileContent = '# Hello World\nThis is a test markdown file.';
 
-  const components = [
-    <TextDisplay content="# Discord Avatars Gallery" />,
-    <MediaGallery>
-      {images.map((url, index) => (
-        <MediaGalleryItem url={url} description={`Avatar ${index + 1}`} />
-      ))}
-    </MediaGallery>,
-  ];
+  const container = (
+    <Container accentColor={Colors.Blue}>
+      <TextDisplay content="Here's a file:" />
+      <File url="attachment://example.md" />
+    </Container>
+  );
 
   await interaction.reply({
-    components: components,
+    components: [container],
+    files: [
+      new AttachmentBuilder(Buffer.from(fileContent), {
+        name: 'example.md',
+      }),
+    ],
     flags: MessageFlags.IsComponentsV2,
   });
 };

apps/website/docs/guide/04-jsx-components/03-discord-components-v2/03-media-gallery.mdx

@@ -8,8 +8,8 @@ items in a grid layout.
 ## Basic usage
 
 ```tsx title="src/app/commands/gallery-example.tsx"
-import type { ChatInputCommand } from 'commandkit';
 import {
+  type ChatInputCommand,
   MediaGallery,
   MediaGalleryItem,
   TextDisplay,

apps/website/docs/guide/04-jsx-components/03-discord-components-v2/04-separator.mdx

@@ -8,8 +8,12 @@ your message components.
 ## Basic usage
 
 ```tsx title="src/app/commands/separator-example.tsx"
-import type { ChatInputCommand } from 'commandkit';
-import { Container, TextDisplay, Separator } from 'commandkit';
+import {
+  type ChatInputCommand,
+  Container,
+  TextDisplay,
+  Separator,
+} from 'commandkit';
 import {
   Colors,
   MessageFlags,

apps/website/docs/guide/04-jsx-components/03-discord-components-v2/05-file.mdx

@@ -8,8 +8,12 @@ Discord messages.
 ## Basic usage
 
 ```tsx title="src/app/commands/file-example.tsx"
-import type { ChatInputCommand } from 'commandkit';
-import { Container, File, TextDisplay } from 'commandkit';
+import {
+  type ChatInputCommand,
+  Container,
+  File,
+  TextDisplay,
+} from 'commandkit';
 import { AttachmentBuilder, Colors, MessageFlags } from 'discord.js';
 
 export const chatInput: ChatInputCommand = async ({