Websites/app/javascript/controllers/notice.ts

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
    static override targets = ["notice"];
    declare noticeTarget: HTMLElement;
    timeout: number | undefined;

    // automatically close
    override connect() {
        this.timeout = setTimeout(() => this._close(), 3500);
    }

    _close() {
        $(this.noticeTarget).fadeOut("fast");
    }

    close(event: KeyboardEvent) {
        if (this.timeout) {
            clearTimeout(this.timeout);
        }
        event.preventDefault();
    }
}