finish embed components

library/embed/embed-author.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { ReacordElement } from "../element.js"
+import { EmbedChildNode } from "./embed-child.js"
+import type { EmbedOptions } from "./embed-options"
+
+export type EmbedAuthorProps = {
+  name?: string
+  children?: string
+  url?: string
+  iconUrl?: string
+}
+
+export function EmbedAuthor(props: EmbedAuthorProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedAuthorNode(props)}
+    />
+  )
+}
+
+class EmbedAuthorNode extends EmbedChildNode<EmbedAuthorProps> {
+  override modifyEmbedOptions(options: EmbedOptions): void {
+    options.author = {
+      name: this.props.name ?? this.props.children ?? "",
+      url: this.props.url,
+      icon_url: this.props.iconUrl,
+    }
+  }
+}

library/embed/embed-field.tsx

@@ -5,8 +5,9 @@ import type { EmbedOptions } from "./embed-options"
 
 export type EmbedFieldProps = {
   name: string
+  value?: string
   inline?: boolean
-  children: string
+  children?: string
 }
 
 export function EmbedField(props: EmbedFieldProps) {
@@ -23,7 +24,7 @@ class EmbedFieldNode extends EmbedChildNode<EmbedFieldProps> {
     options.fields ??= []
     options.fields.push({
       name: this.props.name,
-      value: this.props.children,
+      value: this.props.value ?? this.props.children ?? "",
       inline: this.props.inline,
     })
   }

library/embed/embed-footer.tsx

@@ -0,0 +1,32 @@
+import React from "react"
+import { ReacordElement } from "../element.js"
+import { EmbedChildNode } from "./embed-child.js"
+import type { EmbedOptions } from "./embed-options"
+
+export type EmbedFooterProps = {
+  text?: string
+  children?: string
+  iconUrl?: string
+  timestamp?: string | number | Date
+}
+
+export function EmbedFooter(props: EmbedFooterProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedFooterNode(props)}
+    />
+  )
+}
+
+class EmbedFooterNode extends EmbedChildNode<EmbedFooterProps> {
+  override modifyEmbedOptions(options: EmbedOptions): void {
+    options.footer = {
+      text: this.props.text ?? this.props.children ?? "",
+      icon_url: this.props.iconUrl,
+    }
+    options.timestamp = this.props.timestamp
+      ? new Date(this.props.timestamp).toISOString()
+      : undefined
+  }
+}

library/embed/embed-image.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { ReacordElement } from "../element.js"
+import { EmbedChildNode } from "./embed-child.js"
+import type { EmbedOptions } from "./embed-options"
+
+export type EmbedImageProps = {
+  url: string
+}
+
+export function EmbedImage(props: EmbedImageProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedImageNode(props)}
+    />
+  )
+}
+
+class EmbedImageNode extends EmbedChildNode<EmbedImageProps> {
+  override modifyEmbedOptions(options: EmbedOptions): void {
+    options.image = { url: this.props.url }
+  }
+}

library/embed/embed-thumbnail.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+import { ReacordElement } from "../element.js"
+import { EmbedChildNode } from "./embed-child.js"
+import type { EmbedOptions } from "./embed-options"
+
+export type EmbedThumbnailProps = {
+  url: string
+}
+
+export function EmbedThumbnail(props: EmbedThumbnailProps) {
+  return (
+    <ReacordElement
+      props={props}
+      createNode={() => new EmbedThumbnailNode(props)}
+    />
+  )
+}
+
+class EmbedThumbnailNode extends EmbedChildNode<EmbedThumbnailProps> {
+  override modifyEmbedOptions(options: EmbedOptions): void {
+    options.thumbnail = { url: this.props.url }
+  }
+}

library/embed/embed.tsx

@@ -1,30 +1,18 @@
 import React from "react"
+import type { CamelCasedPropertiesDeep } from "type-fest"
+import { snakeCaseDeep } from "../../helpers/convert-object-property-case"
 import { omit } from "../../helpers/omit"
 import { ReacordElement } from "../element.js"
 import type { MessageOptions } from "../message"
 import { Node } from "../node.js"
 import { EmbedChildNode } from "./embed-child.js"
+import type { EmbedOptions } from "./embed-options"
 
-export type EmbedProps = {
-  description?: string
-  url?: string
-  timestamp?: string
-  color?: number
-  footer?: {
-    text: string
-    iconURL?: string
-  }
-  image?: {
-    url: string
-  }
-  thumbnail?: {
-    url: string
-  }
-  author?: {
-    name: string
-    url?: string
-    iconURL?: string
-  }
+export type EmbedProps = Omit<
+  CamelCasedPropertiesDeep<EmbedOptions>,
+  "timestamp"
+> & {
+  timestamp?: string | number | Date
   children?: React.ReactNode
 }
 
@@ -38,14 +26,19 @@ export function Embed(props: EmbedProps) {
 
 class EmbedNode extends Node<EmbedProps> {
   override modifyMessageOptions(options: MessageOptions): void {
-    const embed = omit(this.props, ["children"])
+    const embed: EmbedOptions = {
+      ...snakeCaseDeep(omit(this.props, ["children", "timestamp"])),
+      timestamp: this.props.timestamp
+        ? new Date(this.props.timestamp).toISOString()
+        : undefined,
+    }
+
     for (const child of this.children) {
       if (child instanceof EmbedChildNode) {
         child.modifyEmbedOptions(embed)
       }
     }
 
-    options.embeds ??= []
     options.embeds.push(embed)
   }
 }

library/main.ts

@@ -3,7 +3,11 @@ export * from "./adapter/discord-js-adapter"
 export * from "./adapter/test-adapter"
 export * from "./button"
 export * from "./embed/embed"
+export * from "./embed/embed-author"
 export * from "./embed/embed-field"
+export * from "./embed/embed-footer"
+export * from "./embed/embed-image"
+export * from "./embed/embed-thumbnail"
 export * from "./embed/embed-title"
 export * from "./interaction"
 export * from "./message"