101 lines
4.1 KiB
TypeScript
101 lines
4.1 KiB
TypeScript
|
import { Author } from "./Author";
|
||
|
|
import { Title } from "./Title";
|
||
|
|
import { Description } from "./Description";
|
||
|
|
|
||
|
|
export const Embed = ({ reminder }) => {
|
||
|
|
return (
|
||
|
|
<div class="discord-embed">
|
||
|
|
<div class="embed-body">
|
||
|
|
<button class="change-color button is-rounded is-small">
|
||
|
|
<span class="is-sr-only">Choose embed color</span>
|
||
|
|
<i class="fas fa-eye-dropper"></i>
|
||
|
|
</button>
|
||
|
|
<div class="a">
|
||
|
|
<Author name={reminder.embed_author} icon={reminder.embed_author_url}></Author>
|
||
|
|
<Title title={reminder.embed_title}></Title>
|
||
|
|
<br></br>
|
||
|
|
<Description description={reminder.embed_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">
|
||
|
|
<a>
|
||
|
|
<img
|
||
|
|
class="embed_thumbnail_url"
|
||
|
|
src="/static/img/bg.webp"
|
||
|
|
alt="Square thumbnail embedded image"
|
||
|
|
></img>
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<p class="image is-400x300 customizable">
|
||
|
|
<a>
|
||
|
|
<img
|
||
|
|
class="embed_image_url"
|
||
|
|
src="/static/img/bg.webp"
|
||
|
|
alt="Large embedded image"
|
||
|
|
></img>
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div class="embed-footer-box">
|
||
|
|
<p class="image is-20x20 customizable">
|
||
|
|
<a>
|
||
|
|
<img
|
||
|
|
class="is-rounded embed_footer_url"
|
||
|
|
src="/static/img/bg.webp"
|
||
|
|
alt="Footer profile-like image"
|
||
|
|
></img>
|
||
|
|
</a>
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<label class="is-sr-only" for="embedFooter">
|
||
|
|
Embed Footer text
|
||
|
|
</label>
|
||
|
|
<textarea
|
||
|
|
class="discord-embed-footer message-input autoresize "
|
||
|
|
placeholder="Embed Footer..."
|
||
|
|
maxlength={2048}
|
||
|
|
name="embed_footer"
|
||
|
|
rows={1}
|
||
|
|
></textarea>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|