banners.jsx

function Banner(props: BannerProps) {
    const [isDismissed, setDismissed] = useState(false);
    const [cssLoaded, setCssLoaded] = useState(false);
  
    useEffect(() => {
       if (!cssLoaded) {
          const link = document.createElement('link')
          link.rel = 'stylesheet'
          link.href = '/static/css/builds/banners.hash.css'
          link.onload = () => {
             setCssLoaded(true)
          }
       }
    }, [cssLoaded]);

    if (isDismissed || !cssLoaded) {
        return null;
    }

    return (
        <div className="mdn-cta-container">
            <div
                id="mdn-cta-content"
                className="mdn-cta-content cta-background-linear"
            >
                <div id="developer-needs" className="mdn-cta-content-container">
                    <h2 className="mdn-cta-title slab-text">{props.title}</h2>
                    <p className="mdn-cta-copy">{props.copy}</p>
                </div>
                <p className="mdn-cta-button-container">
                    <a
                        href={props.url}
                        className="mdn-cta-button"
                        target="_blank"
                        rel="noopener noreferrer"
                    >
                        {props.cta}
                    </a>
                </p>
            </div>
            <div className="mdn-cta-controls">
                <button
                    type="button"
                    id="mdn-cta-close"
                    className="mdn-cta-close"
                    aria-label={gettext('Close banner')}
                    onClick={() => {
                        setDismissed(true);
                        setEmbargoed(props.id, props.embargoDays || 5);
                    }}
                >
                    <CloseIcon className="icon icon-close" />
                </button>
            </div>
        </div>
    );
}