docs: update Container example

Author: notunderctrl

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

@@ -12,8 +12,16 @@ import {
   Modal,
   ShortInput,
   ParagraphInput,
+  TextDisplay,
+  Container,
+  Separator,
 } from 'commandkit';
-import { ButtonStyle, MessageFlags } from 'discord.js';
+import {
+  ButtonStyle,
+  Colors,
+  MessageFlags,
+  SeparatorSpacingSize,
+} from 'discord.js';
 
 export const command: CommandData = {
   name: 'commandkit',
@@ -48,34 +56,35 @@ export const command: CommandData = {
 //   );
 // }
 
-const handleSubmit: OnModalKitSubmit = async (interaction, context) => {
-  const name = interaction.fields.getTextInputValue('name');
-  const description = interaction.fields.getTextInputValue('description');
-
-  await interaction.reply({
-    content: `**Profile Created!**\n**Name:** ${name}\n**Description:** ${description}`,
-    flags: MessageFlags.Ephemeral,
-  });
-
-  context.dispose();
-};
-
 export const chatInput: ChatInputCommand = async ({ interaction }) => {
-  const modal = (
-    <Modal title="User Profile" onSubmit={handleSubmit}>
-      <ShortInput
-        customId="name"
-        label="Name"
-        placeholder="Enter your name"
-        required
+  const headerContainer = (
+    <Container accentColor={Colors.Blue}>
+      <TextDisplay content="# Bot Status Report" />
+      <TextDisplay
+        content={`Generated on <t:${Math.floor(Date.now() / 1000)}:F>`}
       />
-      <ParagraphInput
-        customId="description"
-        label="Description"
-        placeholder="Tell us about yourself"
-      />
-    </Modal>
+    </Container>
+  );
+
+  const statsContainer = (
+    <Container accentColor={Colors.Green}>
+      <TextDisplay content="## Server Statistics" />
+      <TextDisplay content="**Servers:** 50" />
+      <TextDisplay content="**Users:** 15,000" />
+      <TextDisplay content="**Commands executed:** 1,250 today" />
+    </Container>
   );
 
-  await interaction.showModal(modal);
+  const alertsContainer = (
+    <Container accentColor={Colors.Yellow}>
+      <TextDisplay content="## System Alerts" />
+      <TextDisplay content="⚠️ Scheduled maintenance in 2 hours" />
+      <TextDisplay content="✅ All systems operational" />
+    </Container>
+  );
+
+  await interaction.reply({
+    components: [headerContainer, statsContainer, alertsContainer],
+    flags: MessageFlags.IsComponentsV2,
+  });
 };

apps/website/docs/guide/04-jsx-components/03-discord-components-v2/01-text-display.mdx

@@ -8,8 +8,7 @@ you to show text content in your Discord messages.
 ## Basic usage
 
 ```tsx title="src/app/commands/text-example.tsx"
-import type { ChatInputCommand } from 'commandkit';
-import { TextDisplay } from 'commandkit';
+import { type ChatInputCommand, TextDisplay } from 'commandkit';
 import { MessageFlags } from 'discord.js';
 
 export const chatInput: ChatInputCommand = async ({

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

@@ -8,8 +8,11 @@ organize and style multiple components together.
 ## Basic usage
 
 ```tsx title="src/app/commands/container-example.tsx"
-import type { ChatInputCommand } from 'commandkit';
-import { Container, TextDisplay } from 'commandkit';
+import {
+  type ChatInputCommand,
+  Container,
+  TextDisplay,
+} from 'commandkit';
 import { Colors, MessageFlags } from 'discord.js';
 
 export const chatInput: ChatInputCommand = async ({
@@ -35,8 +38,11 @@ The `Container` component accepts an `accentColor` prop that can be
 used to customize its appearance:
 
 ```tsx title="src/app/commands/styled-container.tsx"
-import type { ChatInputCommand } from 'commandkit';
-import { Container, TextDisplay } from 'commandkit';
+import {
+  type ChatInputCommand,
+  Container,
+  TextDisplay,
+} from 'commandkit';
 import { Colors, MessageFlags } from 'discord.js';
 
 export const chatInput: ChatInputCommand = async ({
@@ -69,8 +75,12 @@ export const chatInput: ChatInputCommand = async ({
 You can nest various components inside a Container:
 
 ```tsx title="src/app/commands/nested-container.tsx"
-import type { ChatInputCommand } from 'commandkit';
-import { Container, TextDisplay, Separator } from 'commandkit';
+import {
+  type ChatInputCommand,
+  Container,
+  TextDisplay,
+  Separator,
+} from 'commandkit';
 import {
   Colors,
   MessageFlags,
@@ -109,8 +119,11 @@ export const chatInput: ChatInputCommand = async ({
 You can use multiple containers to organize different sections:
 
 ```tsx title="src/app/commands/multi-container.tsx"
-import type { ChatInputCommand } from 'commandkit';
-import { Container, TextDisplay } from 'commandkit';
+import {
+  type ChatInputCommand,
+  Container,
+  TextDisplay,
+} from 'commandkit';
 import { Colors, MessageFlags } from 'discord.js';
 
 export const chatInput: ChatInputCommand = async ({
@@ -119,7 +132,9 @@ export const chatInput: ChatInputCommand = async ({
   const headerContainer = (
     <Container accentColor={Colors.Blue}>
       <TextDisplay content="# Bot Status Report" />
-      <TextDisplay content="*Generated on <t:${Math.floor(Date.now() / 1000)}:F>*" />
+      <TextDisplay
+        content={`Generated on <t:${Math.floor(Date.now() / 1000)}:F>`}
+      />
     </Container>
   );