Add dashboard to build

reminder-dashboard/src/components/Reminder/Embed/index.tsx

@@ -0,0 +1,90 @@
+import { Author } from "./Author";
+import { Title } from "./Title";
+import { Description } from "./Description";
+import { Footer } from "./Footer";
+import { Color } from "./Color";
+import { Fields } from "./Fields";
+import { Reminder } from "../../../api";
+import { ImagePicker } from "../ImagePicker";
+import { useReminder } from "../ReminderContext";
+
+function intToColor(num: number) {
+    return `#${num.toString(16).padStart(6, "0")}`;
+}
+
+const DEFAULT_COLOR = 9418359;
+
+export const Embed = () => {
+    const [reminder, setReminder] = useReminder();
+
+    return (
+        <div
+            class="discord-embed"
+            style={{
+                borderLeftColor: intToColor(reminder.embed_color || DEFAULT_COLOR),
+            }}
+        >
+            <div class="embed-body">
+                <Color
+                    color={intToColor(reminder.embed_color || DEFAULT_COLOR)}
+                    setReminder={setReminder}
+                ></Color>
+                <div class="a">
+                    <Author
+                        name={reminder.embed_author}
+                        icon={reminder.embed_author_url}
+                        setReminder={setReminder}
+                    ></Author>
+                    <Title
+                        title={reminder.embed_title}
+                        onInput={(title: string) =>
+                            setReminder((reminder: Reminder) => ({
+                                ...reminder,
+                                embed_title: title,
+                            }))
+                        }
+                    ></Title>
+                    <br></br>
+                    <Description
+                        description={reminder.embed_description}
+                        onInput={(description: string) =>
+                            setReminder((reminder: Reminder) => ({
+                                ...reminder,
+                                embed_description: description,
+                            }))
+                        }
+                    />
+                    <br />
+
+                    <Fields />
+                </div>
+
+                <div class="b">
+                    <p class="image thumbnail customizable">
+                        <ImagePicker
+                            class="embed_thumbnail_url"
+                            url={reminder.embed_thumbnail_url}
+                            alt="Square thumbnail embedded image"
+                            setImage={() => {}}
+                        />
+                    </p>
+                </div>
+            </div>
+
+            <p class="image is-400x300 customizable">
+                <ImagePicker
+                    class="embed_image_url"
+                    url={reminder.embed_image_url}
+                    alt="Large embedded image"
+                    setImage={() => {}}
+                />
+            </p>
+
+            <Footer
+                footer={reminder.embed_footer}
+                icon={reminder.embed_footer_url}
+                setReminder={setReminder}
+            />
+        </div>
+    );
+};