From 5f3a319c3656916852e11198c21e0ebbf286f4bb Mon Sep 17 00:00:00 2001
From: Samuel Rowe <samuelrowe1999@gmail.com>
Date: Thu, 28 Jul 2022 21:44:16 +0530
Subject: [PATCH] feat(frontend): created `EmptyNetworks` component

---
 .../Modal/network/EmptyNetworks.tsx           | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 services/frontend/src/components/Modal/network/EmptyNetworks.tsx

diff --git a/services/frontend/src/components/Modal/network/EmptyNetworks.tsx b/services/frontend/src/components/Modal/network/EmptyNetworks.tsx
new file mode 100644
index 0000000..2cfa597
--- /dev/null
+++ b/services/frontend/src/components/Modal/network/EmptyNetworks.tsx
@@ -0,0 +1,43 @@
+import { Button, styled } from "@mui/joy";
+import { FunctionComponent, ReactElement } from "react";
+
+const Root = styled("div")`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: ${({ theme }) => theme.spacing(2, 5, 5, 5)};
+  text-align: center;
+`;
+
+const Image = styled("img")`
+  width: 300px;
+  height: auto;
+`;
+
+const CreateNew = styled(Button)`
+  margin-top: ${({ theme }) => theme.spacing(1)};
+`;
+
+export interface IEmptyNetworksProps {
+  onCreate: () => void;
+}
+
+const EmptyNetworks: FunctionComponent<IEmptyNetworksProps> = (
+  props: IEmptyNetworksProps
+): ReactElement => {
+  const { onCreate } = props;
+  return (
+    <Root>
+      <Image src="https://res.cloudinary.com/hypertool/image/upload/v1657816359/hypertool-assets/empty-projects_fdcxtk.svg" />
+      <p className="mt-4 text-md text-gray-500 dark:text-gray-400">
+        We tried our best, but could not find any networks.
+      </p>
+      <CreateNew variant="solid" size="sm" onClick={onCreate}>
+        Create new network
+      </CreateNew>
+    </Root>
+  );
+};
+
+export default EmptyNetworks;