From 4f3bd413ec7451a8705671b715877cce2add74eb Mon Sep 17 00:00:00 2001
From: pheralb <pablohdez4340@gmail.com>
Date: Thu, 23 Jun 2022 17:23:00 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=92=EF=B8=8F=20Create=20status=20componen?=
 =?UTF-8?q?ts.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/error.tsx   | 47 ++++++++++++++++++++++++++++++++++++++
 src/components/loading.tsx | 15 ++++++++++++
 2 files changed, 62 insertions(+)
 create mode 100644 src/components/error.tsx
 create mode 100644 src/components/loading.tsx

diff --git a/src/components/error.tsx b/src/components/error.tsx
new file mode 100644
index 0000000..a31bf50
--- /dev/null
+++ b/src/components/error.tsx
@@ -0,0 +1,47 @@
+import { ErrorProps } from "@/interfaces/components";
+import {
+  Button,
+  Center,
+  Heading,
+  HStack,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { ArrowClockwise, ArrowSquareOut, Warning } from "phosphor-react";
+import { useRouter } from "next/router";
+import CustomLink from "@/common/link";
+
+const Error = (props: ErrorProps) => {
+  const router = useRouter();
+
+  const handleRefresh = () => {
+    router.reload();
+  };
+
+  return (
+    <Center>
+      <VStack>
+        <Warning size={90} />
+        <Heading fontSize="3xl">{props.title}</Heading>
+        <Text>{props.description}</Text>
+        <HStack>
+          <Button
+            variant="ghost"
+            borderWidth="1px"
+            leftIcon={<ArrowClockwise />}
+            onClick={handleRefresh}
+          >
+            Refresh
+          </Button>
+          <CustomLink href="https://github.com/pheralb/svgl/issues/new" external={true}>
+            <Button variant="ghost" rightIcon={<ArrowSquareOut />}>
+              Create issue
+            </Button>
+          </CustomLink>
+        </HStack>
+      </VStack>
+    </Center>
+  );
+};
+
+export default Error;
diff --git a/src/components/loading.tsx b/src/components/loading.tsx
new file mode 100644
index 0000000..1cd5600
--- /dev/null
+++ b/src/components/loading.tsx
@@ -0,0 +1,15 @@
+import { LoadingProps } from "@/interfaces/components";
+import { Center, Spinner, Text, VStack } from "@chakra-ui/react";
+
+const Loading = (props: LoadingProps) => {
+  return (
+    <Center>
+      <VStack spacing={3}>
+        <Spinner color="brand.purple" />
+        <Text>{props.text}</Text>
+      </VStack>
+    </Center>
+  );
+};
+
+export default Loading;