wassname/Open-Assistant
1
0
Fork 0
mirror of https://github.com/wassname/Open-Assistant.git synced 2026-06-28 16:20:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Style Empty State and 404
This commit is contained in:
Keith Stevens
2023-01-14 17:01:27 +09:00
committed by GitHub
parent 713d38e601 36f67abfaf
commit 206ef80426
3 changed files with 48 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/src/components/EmptyState.tsx
+19 -17
View File
@@ -1,5 +1,6 @@
import { Center, Text, useColorMode, useColorModeValue } from "@chakra-ui/react";
import { FiFileText } from "react-icons/fi";
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 = {
@@ -8,25 +9,26 @@ type EmptyStateProps = {
};
export const EmptyState = (props: EmptyStateProps) => {
const { colorMode } = useColorMode();
const mainBgClasses = colorMode === "light" ? "bg-slate-300 text-gray-900" : "bg-slate-900 text-white";
const widgetClasses = useColorModeValue("border-gray-700 text-gray-700", "border-gray-300 text-gray-300");
const backgroundColor = useColorModeValue("white", "gray.800");
const router = useRouter();
return (
<div className={`p-12 ${mainBgClasses}`}>
<Center>
<div className={`block border-2 border-dotted rounded-lg p-24 text-center ${widgetClasses}`}>
<props.icon className="mx-auto h-16 w-16" />
<Text fontFamily="inter" fontSize="2xl">
{props.text}
</Text>
</div>
</Center>
</div>
<Box bg={backgroundColor} p="10" borderRadius="xl" shadow="base">
<Box display="flex" flexDirection="column" alignItems="center" gap="8" fontSize="lg">
<props.icon size="30" color="DarkOrange" />
<Text>{props.text}</Text>
<Link onClick={() => router.back()} color="blue.500" textUnderlineOffset="3px">
<Text>Click here to go back</Text>
</Link>
</Box>
</Box>
);
};
export const TaskEmptyState = () => {
return <EmptyState text="No tasks found!" icon={FiFileText} />;
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/components/Loading/LoadingScreen.jsx
+3 -5
View File
@@ -1,14 +1,12 @@
import { Box, Center, Progress, Text, useColorModeValue } from "@chakra-ui/react";
export const LoadingScreen = ({ text = "Loading..." } = {}) => {
const mainBgClasses = useColorModeValue("bg-slate-300 text-gray-900", "bg-slate-900 text-white");
return (
<Box width="full" className={mainBgClasses}>
<Box width="full">
<Progress size="sm" isIndeterminate />
{text && (
<Center width="full" className="p-12">
<Text fontFamily="Inter">{text}</Text>
<Center width="full" p="12">
<Text>{text}</Text>
</Center>
)}
</Box>
website/src/pages/404.tsx
+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;