Yoast / wordpress-seo / f58711a939378578f715cfb5ab966e6d6a91bfa2

import { useCallback } from "@wordpress/element";

import { useDispatch } from "@wordpress/data";

import { STORE_NAME } from "../constants";

import { XIcon } from "@heroicons/react/outline";

import { __ } from "@wordpress/i18n";

import { useSvgAria } from "@yoast/ui-library";

import PropTypes from "prop-types";

/**

 * Renders the notice component.

 *

 * @param {string} type The title of the notice.

 * @param {string} id The id of the notice.

 * @param {boolean} isDismissable Whether the notice is dismissable.

 * @param {string} children The content of the notice.

 *

 * @returns {React.Component} The Notice.

 */

export function Notice( { title, id, isDismissable, children } ) {

                // Dismiss the notice after the rest of the call stack has been processed.

                }, 0 );

        }, [ dismissNotice, id ] );

                <div id={ id } className="yst-p-3 yst-rounded-md yoast-general-page-notice">

                        <div className="yst-flex yst-flex-row yst-items-center yst-min-h-[24px]">

                                <span className="yoast-icon" />

                                        <div className="yst-relative yst-ml-auto">

                                                <button

                                                        type="button"

                                                        className="notice-dismiss"

                                                        onClick={ handleDismiss }

                                                >

                                                        <span className="yst-sr-only">{ __( "Close", "wordpress-seo" ) }</span>

                                                        <XIcon className="yst-h-5 yst-w-5" { ...ariaSvgProps } />

                                                </button>

                                        </div>

                                }

                        </div>

                                <div className="yst-flex-1 yst-text-sm yst-max-w-[600px] yst-pl-[29px]" dangerouslySetInnerHTML={ { __html: children } } />

                        ) }

                </div>

        );

}

        title: PropTypes.string.isRequired,

        id: PropTypes.string.isRequired,

        isDismissable: PropTypes.bool.isRequired,

        children: PropTypes.string.isRequired,

};