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

import { Author } from "./Author";
import { Title } from "./Title";
import { Description } from "./Description";
import { Footer } from "./Footer";
import { Color } from "./Color";
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,
                            }))
                        }
                    ></Description>
                    <br></br>

                    <div class="embed-multifield-box">
                        <div data-inlined="1" class="embed-field-box">
                            <label class="is-sr-only" for="embedFieldTitle">
                                Field Title
                            </label>
                            <div class="is-flex">
                                <textarea
                                    class="discord-field-title field-input message-input autoresize"
                                    placeholder="Field Title..."
                                    rows={1}
                                    maxlength={256}
                                    name="embed_field_title[]"
                                ></textarea>
                                <button class="button is-small inline-btn">
                                    <span class="is-sr-only">Toggle field inline</span>
                                    <i class="fas fa-arrows-h"></i>
                                </button>
                            </div>

                            <label class="is-sr-only" for="embedFieldValue">
                                Field Value
                            </label>
                            <textarea
                                class="discord-field-value field-input message-input autoresize "
                                placeholder="Field Value..."
                                maxlength={1024}
                                name="embed_field_value[]"
                                rows={1}
                            ></textarea>
                        </div>
                    </div>
                </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={() => {}}
                        ></ImagePicker>
                    </p>
                </div>
            </div>

            <p class="image is-400x300 customizable">
                <ImagePicker
                    class="embed_image_url"
                    url={reminder.embed_image_url}
                    alt="Large embedded image"
                    setImage={() => {}}
                ></ImagePicker>
            </p>

            <Footer
                footer={reminder.embed_footer}
                icon={reminder.embed_footer_url}
                setReminder={setReminder}
            ></Footer>
        </div>
    );
};