move component into EmptyState

website/src/components/EmptyState.tsx

@@ -1,4 +1,5 @@
-import { Box, Text, useColorModeValue } from "@chakra-ui/react";
+import { Box, Link, Text, useColorModeValue } from "@chakra-ui/react";
+import { useRouter } from "next/router";
 import { FiAlertTriangle } from "react-icons/fi";
 import { IconType } from "react-icons/lib";
 
@@ -9,12 +10,16 @@ type EmptyStateProps = {
 
 export const EmptyState = (props: EmptyStateProps) => {
   const backgroundColor = useColorModeValue("white", "gray.800");
+  const router = useRouter();
 
   return (
     <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
-      <Box display="flex" flexDirection="column" alignItems="center" gap="8">
+      <Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
         <props.icon size="30" color="DarkOrange" />
-        <Text fontSize="lg">{props.text}</Text>
+        <Text>{props.text}</Text>
+        <Link onClick={() => router.back()} color="blue.500" textUnderlineOffset="3px">
+          <Text>Click here to go back</Text>
+        </Link>
       </Box>
     </Box>
   );
@@ -23,3 +28,7 @@ export const EmptyState = (props: EmptyStateProps) => {
 export const TaskEmptyState = () => {
   return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
 };
+
+export const PageEmptyState = () => {
+  return <EmptyState text="Sorry, the page you are looking for does not exist." icon={FiAlertTriangle} />;
+};

website/src/pages/404.tsx

@@ -1,12 +1,9 @@
-import { Box, Center, Link, Text, useColorModeValue } from "@chakra-ui/react";
+import { Center, useColorModeValue } from "@chakra-ui/react";
 import Head from "next/head";
-import { useRouter } from "next/router";
-import { FiAlertTriangle } from "react-icons/fi";
+import { PageEmptyState } from "src/components/EmptyState";
 import { getTransparentHeaderLayout } from "src/components/Layout";
 
 function Error() {
-  const router = useRouter();
-  const backgroundColor = useColorModeValue("white", "gray.800");
   const backgroundColor2 = useColorModeValue("gray.50", "gray.900");
 
   return (
@@ -16,22 +13,11 @@ function Error() {
         <meta name="404" content="Sorry, this page doesn't exist." />
       </Head>
       <Center bg={backgroundColor2} flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
-        <Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
-          <Box display="flex" flexDirection="column" alignItems="center" gap="8">
-            <FiAlertTriangle size="30" color="DarkOrange" />
-            <Box display="flex" flexDirection="column" alignItems="center" gap="3">
-              <Text>Sorry, the page you are looking for does not exist.</Text>
-              <Link onClick={() => router.back()} color="blue.500" textUnderlineOffset="3px">
-                <Text>Click here to go back</Text>
-              </Link>
-            </Box>
-          </Box>
-        </Box>
+        <PageEmptyState />
       </Center>
     </>
   );
 }
 
 Error.getLayout = getTransparentHeaderLayout;
-
 export default Error;