update emptystate to be used in specific pages

This commit is contained in:
rsandb
2023-01-17 21:14:10 -06:00
parent 1f47970558
commit 0c1bb8df05
4 changed files with 18 additions and 26 deletions
-15
View File
@@ -1,6 +1,5 @@
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";
type EmptyStateProps = {
@@ -24,17 +23,3 @@ export const EmptyState = (props: EmptyStateProps) => {
</Box>
);
};
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} />;
};
export const ServerEmptyState = () => {
return (
<EmptyState text="Sorry, we encountered a server error. We're not sure what went wrong." icon={FiAlertTriangle} />
);
};
+3 -4
View File
@@ -1,8 +1,7 @@
import { Box, Button, Center, Link, Text, useColorModeValue } from "@chakra-ui/react";
import { Box, Button, Center, Link, Text } 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 { EmptyState } from "src/components/EmptyState";
import { getTransparentHeaderLayout } from "src/components/Layout";
function Error() {
@@ -13,7 +12,7 @@ function Error() {
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<PageEmptyState />
<EmptyState text="Sorry, the page you are looking for does not exist." icon={FiAlertTriangle} />
<Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
<Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
<Button
+12 -5
View File
@@ -1,10 +1,10 @@
import { Button, Box, Text, Center, Link, Stack } from "@chakra-ui/react";
import { Box, Button, Center, Link, Text } from "@chakra-ui/react";
import Head from "next/head";
import NextLink from "next/link";
import { FiAlertTriangle } from "react-icons/fi";
import { ServerEmptyState } from "src/components/EmptyState";
import { EmptyState } from "src/components/EmptyState";
import { getTransparentHeaderLayout } from "src/components/Layout";
export default function Error() {
function ServerError() {
return (
<>
<Head>
@@ -12,7 +12,10 @@ export default function Error() {
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<ServerEmptyState />
<EmptyState
text="Sorry, we encountered a server error. We're not sure what went wrong."
icon={FiAlertTriangle}
/>
<Box display="flex" flexDirection="column" alignItems="center" gap="2" mt="6">
<Text fontSize="sm">If you were trying to contribute data but ended up here, please file a bug.</Text>
<Button
@@ -37,3 +40,7 @@ export default function Error() {
</>
);
}
ServerError.getLayout = getTransparentHeaderLayout;
export default ServerError;
+3 -2
View File
@@ -1,5 +1,6 @@
import Head from "next/head";
import { TaskEmptyState } from "src/components/EmptyState";
import { FiAlertTriangle } from "react-icons/fi";
import { EmptyState } from "src/components/EmptyState";
import { getDashboardLayout } from "src/components/Layout";
import { LoadingScreen } from "src/components/Loading/LoadingScreen";
import { Task } from "src/components/Tasks/Task";
@@ -13,7 +14,7 @@ const RandomTask = () => {
}
if (tasks.length === 0) {
return <TaskEmptyState />;
return <EmptyState text="Looks like no tasks were found." icon={FiAlertTriangle} />;
}
return (