diff --git a/packages/js/src/dashboard/components/alert-title.js b/packages/js/src/dashboard/components/alert-title.js
new file mode 100644
index 00000000000..8dc522f707e
--- /dev/null
+++ b/packages/js/src/dashboard/components/alert-title.js
@@ -0,0 +1,32 @@
+import { useContext } from "@wordpress/element";
+import PropTypes from "prop-types";
+import classNames from "classnames";
+import { ExclamationCircleIcon } from "@heroicons/react/outline";
+import { Title } from "@yoast/ui-library";
+import { AlertsContext } from "../routes/alert-center";
+
+/**
+ *
+ * @param {string} title The title of alerts.
+ * @param {number} counts The count of the alerts.
+ *
+ * @returns {JSX.Element} The alert title element.
+ */
+export const AlertTitle = ( {
+ title,
+ counts = 0,
+} ) => {
+ const { Icon = ExclamationCircleIcon, iconClass = "" } = useContext( AlertsContext );
+
+ return (
+
+
+
{ title } { counts > 0 && `(${counts})` }
+
+ );
+};
+
+AlertTitle.propTypes = {
+ title: PropTypes.string,
+ counts: PropTypes.number,
+};
diff --git a/packages/js/src/dashboard/components/list.js b/packages/js/src/dashboard/components/alerts-list.js
similarity index 69%
rename from packages/js/src/dashboard/components/list.js
rename to packages/js/src/dashboard/components/alerts-list.js
index de036f28f83..74b38e48c84 100644
--- a/packages/js/src/dashboard/components/list.js
+++ b/packages/js/src/dashboard/components/alerts-list.js
@@ -1,36 +1,35 @@
+import { useContext } from "@wordpress/element";
import PropTypes from "prop-types";
import { Button } from "@yoast/ui-library";
import { EyeOffIcon, EyeIcon } from "@heroicons/react/outline";
import classNames from "classnames";
+import { AlertsContext } from "../routes/alert-center";
/**
*
- * @param {string} bulletColor The color of the bullet.
- * @param {Array} items The list of items.
+ * @param {Object[]} items The list of items.
* @param {boolean} hidden Whether the items are hidden or not.
*
* @returns {JSX.Element} The list component.
*/
-export const List = ( { bulletColor = "red", items = [], hidden = false } ) => {
- const colors = {
- red: "yst-fill-red-500",
- blue: "yst-fill-blue-500",
- };
+export const AlertsList = ( { items = [], hidden = false } ) => {
+ const { bulletClass = "" } = useContext( AlertsContext );
+
const Eye = hidden ? EyeIcon : EyeOffIcon;
return (
-
+
{ items.map( ( item, index ) => (
-
-
{ item.message }