- WIP contents tab adding servers list

Client/src/Components/Inputs/TextInput/Adornments/index.jsx

@@ -1,11 +1,10 @@
 import { Stack, Typography, InputAdornment, IconButton } from "@mui/material";
 import { useTheme } from "@mui/material/styles";
-import { useState } from "react";
 import PropTypes from "prop-types";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import Visibility from "@mui/icons-material/Visibility";
 import Docs from "../../../../assets/icons/docs.svg?react";
-import DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone';
+import DeleteIcon from "../../../../assets/icons/trash-bin.svg?react";
 
 export const HttpAdornment = ({ https }) => {
 	const theme = useTheme();
@@ -96,7 +95,7 @@ export const ServerEndAdornment = ({ id, removeItem }) => {
 					},
 				}}
 			>
-				<DeleteTwoToneIcon/>
+				<DeleteIcon/>
 			</IconButton>
 		</InputAdornment>
 	);

Client/src/Components/TabPanels/Status/ContentPanel.jsx

@@ -40,6 +40,17 @@ const ContentPanel = () => {
 		}
 	};
 
+	const handleAddNew = () => {
+		let arr = localData.monitors;
+		arr.push({ id: "" + Math.random() });
+		setLocalData({ ...localData, monitors: arr });
+	}
+
+	const removeItem = (id) =>{
+		const currentMonitors = localData.monitors.filter(m => m.id !=id)
+		setLocalData({...localData, monitors: currentMonitors})
+	}
+
 	const handleBlur = (event) => {
 		event.preventDefault();
 		const { value, id } = event.target;
@@ -82,9 +93,9 @@ const ContentPanel = () => {
 							</Typography>
 						</Stack>
 					</Box>
-					<Box 
-                        className="status-contents-server-list"	
-                    		sx={{
+					<Box
+						className="status-contents-server-list"
+						sx={{
 							height: "fit-content",
 							border: "solid",
 							borderRadius: theme.shape.borderRadius,
@@ -94,22 +105,44 @@ const ContentPanel = () => {
 							"&:hover": {
 								borderColor: theme.palette.primary.main,
 								backgroundColor: "hsl(215, 87%, 51%, 0.05)",
-							}
-                        }}>
-						<Stack
-							direction="row"
-							justifyContent="space-around"
-						>
-							<Typography
-								component="p"
-								alignSelf={"center"}
+							},
+						}}
+					>
+						<Box>
+							<Stack
+								direction="row"
+								justifyContent="space-around"
 							>
-								{" "}
-								Servers list{" "}
-							</Typography>
-							<Button>Add New</Button>                            
-						</Stack>
-						<Server id="id"/>
+								<Typography
+									component="p"
+									alignSelf={"center"}
+								>
+									{" "}
+									Servers list{" "}
+								</Typography>
+								<Button onClick={handleAddNew}>Add New</Button>
+							</Stack>
+							{localData.monitors.length > 0 && (
+								<Stack
+									direction="column"
+									alignItems="center"
+									gap={theme.spacing(6)}
+									sx={{ml: theme.spacing(4),
+										mr: theme.spacing(8),
+										mb: theme.spacing(8)
+									}}
+								>
+									{localData.monitors.map((m, idx) => (
+										<Server
+											key={idx}
+											id={m.id ?? "" + Math.random()}
+											removeItem={removeItem}
+											value={m.url}
+										/>
+									))}
+								</Stack>
+							)}
+						</Box>
 					</Box>
 				</ConfigBox>
 

Client/src/Components/TabPanels/Status/Server/index.jsx

@@ -2,7 +2,7 @@ import TextInput from "../../../Inputs/TextInput";
 import { ServerStartAdornment, ServerEndAdornment } from "../../../Inputs/TextInput/Adornments";
 
 
-const Server = ({ id, removeItem }) => {
+const Server = ({ id, removeItem, value }) => {
 	return (
 		<TextInput
 			type="text"
@@ -14,6 +14,7 @@ const Server = ({ id, removeItem }) => {
 				/>
 			}
 			id={id}
+			value= {value}
 		></TextInput>
 	);
 };