replace list with table

src/Pages/DistributedUptime/Details/Components/DeviceTicker/index.jsx

@@ -1,7 +1,8 @@
-import { Stack, Typography, List, ListItem } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 import PulseDot from "../../../../../Components/Animated/PulseDot";
 import "flag-icons/css/flag-icons.min.css";
+import { styled } from "@mui/material/styles";
 
 const BASE_BOX_PADDING_VERTICAL = 16;
 const BASE_BOX_PADDING_HORIZONTAL = 8;
@@ -23,12 +24,12 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 				backgroundColor: theme.palette.background.main,
 				border: 1,
 				borderStyle: "solid",
+				borderRadius: theme.spacing(4),
 				borderColor: theme.palette.primary.lowContrast,
 			}}
 		>
 			<Stack
 				direction="row"
-				justifyContent={"center"}
 				gap={theme.spacing(4)}
 			>
 				<PulseDot color={statusColor[connectionStatus]} />
@@ -41,29 +42,52 @@ const DeviceTicker = ({ data, width = "100%", connectionStatus }) => {
 					{connectionStatus === "up" ? "Connected" : "No connection"}
 				</Typography>
 			</Stack>
-			<List>
-				{data.slice(Math.max(data.length - 5, 0)).map((dataPoint) => {
-					const countryCode = dataPoint?.countryCode?.toLowerCase() ?? null;
-					const flag = countryCode ? `fi fi-${countryCode}` : null;
-					return (
-						<ListItem key={Math.random()}>
-							<Stack direction="column">
-								<Stack
-									direction="row"
-									alignItems="center"
-									gap={theme.spacing(4)}
-								>
-									{flag && <span className={flag} />}
-									<Typography variant="h2">{dataPoint?.city || "Unknown"}</Typography>
-								</Stack>
-								<Typography variant="p">{`Response time: ${Math.floor(dataPoint?.responseTime ?? 0)} ms`}</Typography>
-								<Typography variant="p">{`UPT burned: ${dataPoint.uptBurnt}`}</Typography>
-								<Typography variant="p">{`${dataPoint?.device?.manufacturer} ${dataPoint?.device?.model}`}</Typography>
-							</Stack>
-						</ListItem>
-					);
-				})}
-			</List>
+			<table>
+				<thead>
+					<tr>
+						<th style={{ textAlign: "left" }}>
+							<Typography>COUNTRY</Typography>
+						</th>
+						<th style={{ textAlign: "left" }}>
+							<Typography>CITY</Typography>
+						</th>
+						<th style={{ textAlign: "right" }}>
+							<Typography>RESPONSE</Typography>
+						</th>
+						<th style={{ textAlign: "right" }}>
+							<Typography>UPT BURNED</Typography>
+						</th>
+					</tr>
+				</thead>
+				<tbody>
+					{data.map((dataPoint) => {
+						const countryCode = dataPoint?.countryCode?.toLowerCase() ?? null;
+						const flag = countryCode ? `fi fi-${countryCode}` : null;
+						const city = dataPoint?.city !== "" ? dataPoint?.city : "Unknown";
+						return (
+							<tr key={Math.random()}>
+								<td style={{ padding: theme.spacing(4) }}>
+									<Typography>
+										{flag ? <span className={flag} /> : null}{" "}
+										{countryCode?.toUpperCase() ?? "N/A"}
+									</Typography>
+								</td>
+								<td>
+									<Typography>{city}</Typography>
+								</td>
+								<td style={{ textAlign: "right" }}>
+									<Typography>{Math.floor(dataPoint.responseTime)} ms</Typography>
+								</td>
+								<td style={{ textAlign: "right" }}>
+									<Typography color={theme.palette.warning.main}>
+										+{dataPoint.uptBurnt}
+									</Typography>
+								</td>
+							</tr>
+						);
+					})}
+				</tbody>
+			</table>
 		</Stack>
 	);
 };