From fcd380faa1efcbf03858652f9887979f2c6ec2d9 Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Sun, 9 Jan 2022 01:38:42 -0600
Subject: [PATCH] embeds guide

---
 packages/docs/src/guides/embeds.md | 56 +++++++++++++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/packages/docs/src/guides/embeds.md b/packages/docs/src/guides/embeds.md
index 3ff694a..3e77153 100644
--- a/packages/docs/src/guides/embeds.md
+++ b/packages/docs/src/guides/embeds.md
@@ -6,4 +6,58 @@ description: Using embed components
 
 # Embeds
 
-todo
+Reacord comes with an `<Embed />` component for sending rich embeds.
+
+```jsx
+import { Embed } from "reacord"
+
+function FancyMessage({ title, description }) {
+  return (
+    <Embed
+      title={title}
+      description={description}
+      color={0x00ff00}
+      timestamp={Date.now()}
+    />
+  )
+}
+```
+
+```jsx
+reacord.send(channelId, <FancyMessage title="Hello" description="World" />)
+```
+
+Reacord also comes with multiple embed components, for defining embeds on a piece-by-piece basis. This enables composition:
+
+```jsx
+import { Embed, EmbedTitle } from "reacord"
+
+function FancyDetails({ title, description }) {
+  return (
+    <>
+      <EmbedTitle>{title}</EmbedTitle>
+      {/* embed descriptions are just text */}
+      {description}
+    </>
+  )
+}
+
+function FancyMessage({ children }) {
+  return (
+    <Embed color={0x00ff00} timestamp={Date.now()}>
+      {children}
+    </Embed>
+  )
+}
+```
+
+```jsx
+reacord.send(
+  channelId,
+  <FancyMessage>
+    <FancyDetails title="Hello" description="World" />
+  </FancyMessage>,
+)
+```
+
+See the [API Reference](/api) for the full list of embed components.