54 lines
1.7 KiB
TypeScript
54 lines
1.7 KiB
TypeScript
import { Reminder } from "../../../api";
|
|
import { ImagePicker } from "../ImagePicker";
|
|
import { Mentions } from "../../App/Mentions";
|
|
import { useRef } from "preact/hooks";
|
|
import { useGuild } from "../../App/useGuild";
|
|
|
|
type Props = {
|
|
footer: string;
|
|
icon: string;
|
|
setReminder: (r: (reminder: Reminder) => Reminder) => void;
|
|
};
|
|
|
|
export const Footer = ({ footer, icon, setReminder }: Props) => {
|
|
const guild = useGuild();
|
|
const input = useRef(null);
|
|
|
|
return (
|
|
<div class="embed-footer-box">
|
|
<p class="image is-20x20 customizable">
|
|
<ImagePicker
|
|
class="is-rounded embed_footer_url"
|
|
url={icon}
|
|
alt="Footer profile-like image"
|
|
setImage={(url: string) => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
embed_footer_url: url,
|
|
}));
|
|
}}
|
|
></ImagePicker>
|
|
</p>
|
|
<label class="is-sr-only" for="embedFooter">
|
|
Embed Footer text
|
|
</label>
|
|
{guild && <Mentions input={input} />}
|
|
<textarea
|
|
class="discord-embed-footer message-input autoresize "
|
|
placeholder="Embed Footer..."
|
|
maxlength={2048}
|
|
name="embed_footer"
|
|
rows={1}
|
|
ref={input}
|
|
value={footer}
|
|
onInput={(ev) => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
embed_footer: ev.currentTarget.value,
|
|
}));
|
|
}}
|
|
></textarea>
|
|
</div>
|
|
);
|
|
};
|