From 6aacfe0ca836967badedbb51f96706a4cd49cdc7 Mon Sep 17 00:00:00 2001
From: Daniel Cojocea <danielcojocea28@gmail.com>
Date: Mon, 22 Jul 2024 16:35:57 -0400
Subject: [PATCH] Implemented fallback component

---
 Client/src/Components/Check/Check.jsx         | 11 +++--
 Client/src/Components/Fallback/index.css      | 23 ++++++++++
 Client/src/Components/Fallback/index.jsx      | 44 +++++++++++++++++++
 Client/src/Pages/Status/index.jsx             | 23 +++++++++-
 .../src/assets/Images/create-placeholder.svg  | 29 ++++++++++++
 Client/src/assets/icons/check-outlined.svg    |  3 ++
 6 files changed, 128 insertions(+), 5 deletions(-)
 create mode 100644 Client/src/Components/Fallback/index.css
 create mode 100644 Client/src/Components/Fallback/index.jsx
 create mode 100644 Client/src/assets/Images/create-placeholder.svg
 create mode 100644 Client/src/assets/icons/check-outlined.svg

diff --git a/Client/src/Components/Check/Check.jsx b/Client/src/Components/Check/Check.jsx
index 501d0a344..b43754fa9 100644
--- a/Client/src/Components/Check/Check.jsx
+++ b/Client/src/Components/Check/Check.jsx
@@ -1,6 +1,7 @@
 import "./check.css";
 import PropTypes from "prop-types";
 import CheckGrey from "../../assets/icons/check.svg?react";
+import CheckOutlined from "../../assets/icons/check-outlined.svg?react";
 import { Stack, Typography } from "@mui/material";
 import { useTheme } from "@emotion/react";
 
@@ -18,12 +19,12 @@ import { useTheme } from "@emotion/react";
  *
  * @returns {React.Element} The `Check` component with a check icon and a label, defined by the `text` prop.
  */
-const Check = ({ text, variant = "info" }) => {
+const Check = ({ text, variant = "info", outlined = false }) => {
   const theme = useTheme();
   return (
     <Stack
       direction="row"
-      gap={theme.gap.small}
+      gap={outlined ? theme.gap.medium : theme.gap.small}
       className={`check${
         variant === "error"
           ? " check-error"
@@ -33,7 +34,11 @@ const Check = ({ text, variant = "info" }) => {
       }`}
       alignItems="center"
     >
-      <CheckGrey alt="form checks" />
+      {outlined ? (
+        <CheckOutlined alt="check" />
+      ) : (
+        <CheckGrey alt="form checks" />
+      )}
       <Typography component="span">{text}</Typography>
     </Stack>
   );
diff --git a/Client/src/Components/Fallback/index.css b/Client/src/Components/Fallback/index.css
new file mode 100644
index 000000000..31c706241
--- /dev/null
+++ b/Client/src/Components/Fallback/index.css
@@ -0,0 +1,23 @@
+[class*="fallback__"] {
+  width: 255px;
+  margin: auto;
+  margin-top: 100px;
+}
+[class*="fallback__"] h1.MuiTypography-root {
+  font-size: var(--env-var-font-size-large);
+  font-weight: 600;
+}
+[class*="fallback__"] .check span.MuiTypography-root,
+[class*="fallback__"] h1.MuiTypography-root {
+  color: var(--env-var-color-5);
+}
+[class*="fallback__"] button.MuiButtonBase-root,
+[class*="fallback__"] .check {
+  width: max-content;
+}
+[class*="fallback__"] button.MuiButtonBase-root {
+  height: 34px;
+}
+[class*="fallback__"] .check span.MuiTypography-root {
+  font-size: var(--env-var-font-size-medium);
+}
diff --git a/Client/src/Components/Fallback/index.jsx b/Client/src/Components/Fallback/index.jsx
new file mode 100644
index 000000000..8df84feba
--- /dev/null
+++ b/Client/src/Components/Fallback/index.jsx
@@ -0,0 +1,44 @@
+import { useTheme } from "@emotion/react";
+import { Stack, Typography } from "@mui/material";
+import Skeleton from "../../assets/Images/create-placeholder.svg?react";
+import Button from "../Button";
+import Check from "../Check/Check";
+import { useNavigate } from "react-router-dom";
+import "./index.css";
+
+const Fallback = ({ title, checks, link = "/" }) => {
+  const theme = useTheme();
+  const navigate = useNavigate();
+
+  return (
+    <Stack
+      className={`fallback__${title.trim().split(" ")[0]}`}
+      gap={theme.gap.xl}
+    >
+      <Skeleton />
+      <Stack gap={theme.gap.small}>
+        <Typography
+          component="h1"
+          marginY={theme.gap.medium}
+        >
+          A {title} is used to:
+        </Typography>
+        {checks.map((check, index) => (
+          <Check
+            text={check}
+            key={`${title.trim().split(" ")[0]}-${index}`}
+            outlined={true}
+          />
+        ))}
+      </Stack>
+      <Button
+        level="primary"
+        label={`Let's create your ${title}`}
+        sx={{ alignSelf: "center" }}
+        onClick={() => navigate(link)}
+      />
+    </Stack>
+  );
+};
+
+export default Fallback;
diff --git a/Client/src/Pages/Status/index.jsx b/Client/src/Pages/Status/index.jsx
index f0cf82b60..071948576 100644
--- a/Client/src/Pages/Status/index.jsx
+++ b/Client/src/Pages/Status/index.jsx
@@ -1,7 +1,26 @@
-import React from "react";
+import Fallback from "../../Components/Fallback";
+import { useTheme } from "@emotion/react";
 
 const Status = () => {
-  return <div>Status</div>;
+  const theme = useTheme();
+
+  return (
+    <div
+      className="status"
+      style={{
+        padding: `${theme.content.pY} ${theme.content.pX}`,
+      }}
+    >
+      <Fallback
+        title="status page"
+        checks={[
+          "Share your uptime publicly",
+          "Keep your users informed about incidents",
+          "Build trust with your customers",
+        ]}
+      />
+    </div>
+  );
 };
 
 export default Status;
diff --git a/Client/src/assets/Images/create-placeholder.svg b/Client/src/assets/Images/create-placeholder.svg
new file mode 100644
index 000000000..bdd9ef945
--- /dev/null
+++ b/Client/src/assets/Images/create-placeholder.svg
@@ -0,0 +1,29 @@
+<svg width="256" height="170" viewBox="0 0 256 170" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.390244" y="0.390244" width="255.22" height="168.585" rx="7.41463" fill="white"/>
+<rect x="0.390244" y="0.390244" width="255.22" height="168.585" rx="7.41463" stroke="#EBEBEB" stroke-width="0.780488"/>
+<rect x="17.9512" y="16.3901" width="220.098" height="54.6341" rx="3.12195" fill="#EFF2FF"/>
+<rect x="17.9512" y="78.8293" width="85.0732" height="9.36585" rx="3.12195" fill="#D9D9D9"/>
+<rect x="17.9512" y="93.6584" width="220.098" height="9.36585" rx="3.12195" fill="#F3F3F3"/>
+<rect x="17.9512" y="108.488" width="220.098" height="9.36585" rx="3.12195" fill="#F3F3F3"/>
+<g filter="url(#filter0_d_28_7483)">
+<g clip-path="url(#clip0_28_7483)">
+<rect x="174.049" y="129.561" width="64" height="20.2927" rx="3.12195" fill="#E0F2FE"/>
+</g>
+<rect x="174.439" y="129.951" width="63.2195" height="19.5122" rx="2.73171" stroke="#D5D9EB" stroke-width="0.780488"/>
+</g>
+<defs>
+<filter id="filter0_d_28_7483" x="172.049" y="128.561" width="68" height="24.2927" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.0627451 0 0 0 0 0.0941176 0 0 0 0 0.156863 0 0 0 0.05 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_28_7483"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_28_7483" result="shape"/>
+</filter>
+<clipPath id="clip0_28_7483">
+<rect x="174.049" y="129.561" width="64" height="20.2927" rx="3.12195" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/Client/src/assets/icons/check-outlined.svg b/Client/src/assets/icons/check-outlined.svg
new file mode 100644
index 000000000..d26657863
--- /dev/null
+++ b/Client/src/assets/icons/check-outlined.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.24935 10.0001L8.74935 12.5001L13.7493 7.50008M18.3327 10.0001C18.3327 14.6025 14.6017 18.3334 9.99935 18.3334C5.39698 18.3334 1.66602 14.6025 1.66602 10.0001C1.66602 5.39771 5.39698 1.66675 9.99935 1.66675C14.6017 1.66675 18.3327 5.39771 18.3327 10.0001Z" stroke="#1570EF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>