Merge pull request #3 from MuhammadKhalilzadeh/charts2

Charts

Client/src/components/Charts/Servers/ServerStatus.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import "./serverStatus.css";
+
+function ServerStatus({ title, value, state }) {
+  return (
+    <div className="server-status-tile">
+      <div className="server-status-tile-title">{title}</div>
+      <div className={`server-status-tile-value ` + " " + state}>{value}</div>
+    </div>
+  );
+}
+
+export default ServerStatus;

Client/src/components/Charts/Servers/serverStatus.css

@@ -0,0 +1,46 @@
+:root {
+  --spacing-general-0: 10px 25px;
+  --spacing-general-1: 20px;
+  --color-border-0: #eaecf0;
+  --border-radius-0: 4px;
+  --font-size-0: 1rem;
+  --font-size-2: 36px;
+  --font-family-0: "Roboto", "Helvetica", "Arial", sans-serif;
+
+  --color-up: #17b26a;
+  --color-down: #f04438;
+  --color-pause: #fdb022;
+}
+
+.server-status-tile {
+  width: 230px;
+  margin: var(--spacing-general-0);
+  padding: var(--spacing-general-1);
+  border: 1px solid var(--color-border-0);
+  border-radius: var(--border-radius-0);
+}
+
+.server-status-tile-title {
+  font-size: var(--font-size-0);
+  font-family: var(--font-family-0);
+  font-weight: bold;
+  margin-bottom: 25px;
+}
+
+.server-status-tile-value {
+  font-size: var(--font-size-2);
+  font-family: var(--font-family-0);
+  font-weight: bolder;
+}
+
+.up {
+  color: var(--color-up);
+}
+
+.down {
+  color: var(--color-down);
+}
+
+.pause {
+  color: var(--color-pause);
+}

Client/src/components/Charts/Statistics/Statistic.jsx

@@ -0,0 +1,13 @@
+import React from "react";
+import "./statistic.css";
+
+function Statistic({ title, value }) {
+  return (
+    <div className="statistic-tile">
+      <div className="statistic-tile-title">{title}</div>
+      <div className="statistic-tile-value">{value}</div>
+    </div>
+  );
+}
+
+export default Statistic;

Client/src/components/Charts/Statistics/statistic.css

@@ -0,0 +1,34 @@
+:root {
+  --stats-spacing-general-0: 5px 10px;
+  --color-border-0: #eaecf0;
+  --border-radius-0: 4px;
+  --font-size-0: 1rem;
+  --font-size-1: 13px;
+  --font-family-0: "Roboto", "Helvetica", "Arial", sans-serif;
+  --font-color-0: #344054;
+  --margin-bottom-0: 10px;
+}
+
+.statistic-tile {
+  margin: var(--stats-spacing-general-0);
+  padding: var(--stats-spacing-general-0);
+  border: 1px solid var(--color-border-0);
+  border-radius: var(--border-radius-0);
+
+  width: 180px;
+}
+
+.statistic-tile-title {
+  font-size: var(--font-size-0);
+  font-family: var(--font-family-0);
+  color: var(--font-color-0);
+  margin-bottom: var(--margin-bottom-0);
+}
+
+.statistic-tile-value {
+  font-size: var(--font-size-1);
+  font-family: var(--font-family-0);
+  color: var(--font-color-0);
+  font-weight: 700;
+  margin-bottom: var(--margin-bottom-0);
+}

Client/src/screens/PlayGround/PlayGround-Charts.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import "./playGround.css";
+import Statistic from "../../components/Charts/Statistics/Statistic";
+import ServerStatus from "../../components/Charts/Servers/ServerStatus";
+
+function PlayGroundCharts() {
+  return (
+    <>
+      <div className="play-ground-charts">
+        <Statistic title="Currently up for" value="4h 30m 2s" />
+        <Statistic title="Last checked" value="15 seconds ago" />
+        <Statistic title="Incidents" value="2" />
+        <Statistic title="Certificate expiry" value="284 days" />
+      </div>
+      <div className="play-ground-charts-spacing" />
+      <div className="play-ground-charts">
+        <ServerStatus title="Up" value="4" state="up" />
+        <ServerStatus title="Down" value="0" state="down" />
+        <ServerStatus title="Paused" value="0" state="pause" />
+      </div>
+    </>
+  );
+}
+
+export default PlayGroundCharts;

Client/src/screens/PlayGround/playGround.css

@@ -0,0 +1,7 @@
+.play-ground-charts {
+  display: flex;
+}
+
+.play-ground-charts-spacing {
+  height: 110px;
+}