reminder-bot/reminder-dashboard/src/components/Reminder/ImagePicker.tsx

import { Modal } from "../Modal";
import { useState } from "preact/hooks";

export const ImagePicker = ({ alt, url, setImage, ...props }) => {
    const [modalOpen, setModalOpen] = useState(false);

    return (
        <>
            <a
                onClick={() => {
                    setModalOpen(true);
                }}
                role={"button"}
            >
                <img {...props} src={url || "/static/img/bg.webp"} alt={alt}></img>
            </a>
            {modalOpen && (
                <ImagePickerModal
                    setModalOpen={setModalOpen}
                    setImage={setImage}
                ></ImagePickerModal>
            )}
        </>
    );
};

const ImagePickerModal = ({ setModalOpen, setImage }) => {
    const [value, setValue] = useState("");

    return (
        <Modal
            setModalOpen={setModalOpen}
            title={"Enter Image URL"}
            onSubmit={() => {
                setImage(value);
                setModalOpen(false);
            }}
            onSubmitText={"Save"}
        >
            <p>
                Please note: if you attach an image directly from Discord, it will not be visible in
                the dashboard, but will be visible on reminders. Other image-sharing sites such as
                Imgur don't have this issue.
            </p>
            <input
                class="input"
                id="urlInput"
                placeholder="Image URL..."
                onInput={(ev) => {
                    setValue(ev.currentTarget.value);
                }}
            ></input>
        </Modal>
    );
};