Merge pull request #1893 from renatoka/fix/1892-status-component

fix: add <StatusLabel> on "status pages" table

src/Components/Label/index.jsx

@@ -114,7 +114,7 @@ ColoredLabel.propTypes = {
 /**
  * @component
  * @param {Object} props
- * @param { 'up' | 'down' | 'cannot resolve'} props.status - The status for the label
+ * @param {'up' | 'down' | 'paused' | 'pending' | 'cannot resolve' | 'published' | 'unpublished'} props.status - The status for the label
  * @param {string} props.text - The text of the label
  * @returns {JSX.Element}
  * @example
@@ -128,6 +128,8 @@ const statusToTheme = {
 	paused: "warning",
 	pending: "warning",
 	"cannot resolve": "error",
+	published: "success",
+	unpublished: "error",
 };
 
 const StatusLabel = ({ status, text, customStyles }) => {
@@ -156,7 +158,7 @@ const StatusLabel = ({ status, text, customStyles }) => {
 };
 
 StatusLabel.propTypes = {
-	status: PropTypes.oneOf(["up", "down", "paused", "pending", "cannot resolve"]),
+	status: PropTypes.oneOf(["up", "down", "paused", "pending", "cannot resolve", "published", "unpublished"]),
 	text: PropTypes.string,
 	customStyles: PropTypes.object,
 };

src/Pages/StatusPage/StatusPages/Components/StatusPagesTable/index.jsx

@@ -1,7 +1,7 @@
 import DataTable from "../../../../../Components/Table";
 import { useTheme } from "@emotion/react";
 import { useNavigate } from "react-router-dom";
-import { ColoredLabel } from "../../../../../Components/Label";
+import { StatusLabel } from "../../../../../Components/Label";
 import ArrowOutwardIcon from "@mui/icons-material/ArrowOutward";
 import { Stack, Typography } from "@mui/material";
 const StatusPagesTable = ({ data }) => {
@@ -66,12 +66,11 @@ const StatusPagesTable = ({ data }) => {
 			id: "status",
 			content: "Status",
 			render: (row) => {
+				const status = row.isPublished ? "published" : "unpublished";
 				return (
-					<ColoredLabel
-						label={row.isPublished ? "Published" : "Unpublished"}
-						color={
-							row.isPublished ? theme.palette.success.main : theme.palette.warning.main
-						}
+					<StatusLabel
+						status={status}
+						text={row.isPublished ? "Published" : "Unpublished"}
 					/>
 				);
 			},