91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
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,
|
|
}))
|
|
}
|
|
></Description>
|
|
<br></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={() => {}}
|
|
></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>
|
|
);
|
|
};
|