refactor and simplify things

src/components/action-row.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+
+export type ActionRowProps = {
+  children: React.ReactNode
+}
+
+export function ActionRow(props: ActionRowProps) {
+  return (
+    <reacord-element createNode={() => ({ type: "actionRow", children: [] })}>
+      {props.children}
+    </reacord-element>
+  )
+}

src/components/button.tsx

@@ -0,0 +1,21 @@
+import type { EmojiResolvable, MessageButtonStyle } from "discord.js"
+import React from "react"
+
+export type ButtonStyle = Exclude<Lowercase<MessageButtonStyle>, "link">
+
+export type ButtonProps = {
+  style?: ButtonStyle
+  emoji?: EmojiResolvable
+  disabled?: boolean
+  children?: React.ReactNode
+}
+
+export function Button(props: ButtonProps) {
+  return (
+    <reacord-element
+      createNode={() => ({ ...props, type: "button", children: [] })}
+    >
+      {props.children}
+    </reacord-element>
+  )
+}

src/components/embed-field.tsx

@@ -0,0 +1,17 @@
+import React from "react"
+
+export type EmbedFieldProps = {
+  name: string
+  children: React.ReactNode
+  inline?: boolean
+}
+
+export function EmbedField(props: EmbedFieldProps) {
+  return (
+    <reacord-element
+      createNode={() => ({ ...props, type: "embedField", children: [] })}
+    >
+      {props.children}
+    </reacord-element>
+  )
+}

src/components/embed.tsx

@@ -0,0 +1,32 @@
+import type { ColorResolvable } from "discord.js"
+import type { ReactNode } from "react"
+import React from "react"
+
+export type EmbedProps = {
+  title?: string
+  color?: ColorResolvable
+  url?: string
+  timestamp?: Date | number | string
+  imageUrl?: string
+  thumbnailUrl?: string
+  author?: {
+    name: string
+    url?: string
+    iconUrl?: string
+  }
+  footer?: {
+    text: string
+    iconUrl?: string
+  }
+  children?: ReactNode
+}
+
+export function Embed(props: EmbedProps) {
+  return (
+    <reacord-element
+      createNode={() => ({ ...props, type: "embed", children: [] })}
+    >
+      {props.children}
+    </reacord-element>
+  )
+}

src/components/text.tsx

@@ -0,0 +1,14 @@
+import type { ReactNode } from "react"
+import React from "react"
+
+export type TextProps = {
+  children?: ReactNode
+}
+
+export function Text(props: TextProps) {
+  return (
+    <reacord-element createNode={() => ({ type: "textElement", children: [] })}>
+      {props.children}
+    </reacord-element>
+  )
+}