59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { ImagePicker } from "../ImagePicker";
|
|
import { Reminder } from "../../../api";
|
|
import { Mentions } from "../../App/Mentions";
|
|
import { useRef } from "preact/hooks";
|
|
import { useGuild } from "../../App/useGuild";
|
|
|
|
type Props = {
|
|
name: string;
|
|
icon: string;
|
|
setReminder: (r: (reminder: Reminder) => Reminder) => void;
|
|
};
|
|
|
|
export const Author = ({ name, icon, setReminder }: Props) => {
|
|
const guild = useGuild();
|
|
const input = useRef(null);
|
|
|
|
return (
|
|
<div class="embed-author-box">
|
|
<div class="a">
|
|
<p class="image is-24x24 customizable">
|
|
<ImagePicker
|
|
class="is-rounded embed_author_url"
|
|
url={icon}
|
|
alt="Image for embed author"
|
|
setImage={(url: string) => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
embed_author_url: url,
|
|
}));
|
|
}}
|
|
></ImagePicker>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="b">
|
|
{guild && <Mentions input={input} />}
|
|
<label class="is-sr-only" for="embedAuthor">
|
|
Embed Author
|
|
</label>
|
|
<textarea
|
|
class="discord-embed-author message-input autoresize"
|
|
placeholder="Embed Author..."
|
|
rows={1}
|
|
ref={input}
|
|
maxlength={256}
|
|
name="embed_author"
|
|
value={name}
|
|
onInput={(ev) => {
|
|
setReminder((reminder) => ({
|
|
...reminder,
|
|
embed_author: ev.currentTarget.value,
|
|
}));
|
|
}}
|
|
></textarea>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|