Merge pull request #695 from rsandb/Style-Empty-State-and-404

Style Empty State and 404
This commit is contained in:
Keith Stevens
2023-01-14 17:01:27 +09:00
committed by GitHub
3 changed files with 48 additions and 33 deletions
+26 -11
View File
@@ -1,32 +1,47 @@
import { Button, Link, Stack } from "@chakra-ui/react";
import { Box, Button, Center, Link, Text, useColorModeValue } from "@chakra-ui/react";
import Head from "next/head";
import NextLink from "next/link";
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");
export default function Error() {
return (
<>
<Head>
<title>404 - Open Assistant</title>
<meta name="404" content="Sorry, this page doesn't exist." />
</Head>
<main className="flex h-3/4 items-center justify-center overflow-hidden subpixel-antialiased text-xl">
<Stack>
<p>Sorry, the page you are looking for does not exist.</p>
<p>If you were trying to contribute data but ended up here, please file a bug</p>
<Button leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />} variant="solid">
<Center flexDirection="column" gap="4" fontSize="lg" className="subpixel-antialiased">
<PageEmptyState />
<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
width="fit-content"
leftIcon={<FiAlertTriangle className="text-blue-500" aria-hidden="true" />}
variant="solid"
size="xs"
>
<Link
as={NextLink}
key="Report a Bug"
href="https://github.com/LAION-AI/Open-Assistant/issues/new/choose"
aria-label="Report a Bug"
className="flex items-center"
_hover={{ textDecoration: "none" }}
isExternal
>
Report a Bug
</Link>
</Button>
</Stack>
</main>
</Box>
</Center>
</>
);
}
Error.getLayout = getTransparentHeaderLayout;
export default Error;