add link and style for public status page

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

@@ -17,16 +17,38 @@ const StatusPagesTable = ({ data }) => {
 		},
 		{
 			id: "url",
-			content: "URL",
+			content: "Public URL",
+			onClick: (e, row) => {
+				if (row.isPublished) {
+					e.stopPropagation();
+					const url =
+						row.type === "distributed"
+							? `/status/distributed/public/${row.url}`
+							: `/status/uptime/public/${row.url}`;
+					navigate(url);
+				}
+			},
+			getCellSx: (row) => {
+				return {
+					...(row.isPublished && {
+						"&.MuiTableCell-root:hover": {
+							backgroundColor: `${theme.palette.primary.light}`,
+							cursor: "pointer",
+							borderRadius: 1,
+						},
+					}),
+				};
+			},
 			render: (row) => {
+				const content = row.isPublished ? `/${row.url}` : "Unpublished";
 				return (
 					<Stack
 						direction="row"
 						alignItems="center"
 						gap={theme.spacing(2)}
 					>
-						<Typography>{`/${row.url}`}</Typography>
-						<ArrowOutwardIcon />
+						<Typography>{content}</Typography>
+						{row.isPublished && <ArrowOutwardIcon />}
 					</Stack>
 				);
 			},