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

import { useReminder } from "./ReminderContext";
import { useGuild } from "../App/useGuild";

export const Username = () => {
    const guild = useGuild();
    const [reminder, setReminder] = useReminder();

    return guild ? (
        <div class="discord-message-header">
            <label class="is-sr-only">Username Override</label>
            <input
                class="discord-username message-input"
                placeholder="Username Override"
                maxlength={32}
                name="username"
                value={reminder.username || "Reminder"}
                onBlur={(ev) => {
                    setReminder((reminder) => ({
                        ...reminder,
                        username: ev.currentTarget.value,
                    }));
                }}
            ></input>
        </div>
    ) : (
        <div class="discord-message-header">
            <span class="discord-username">Reminder Bot</span>
        </div>
    );
};