1
0
Fork 1
mirror of https://github.com/SomboChea/ui synced 2024-06-16 00:19:42 +07:00
verdaccio-ui/src/components/NotFound/NotFound.tsx
Priscila Oliveira b56e43846b fix: rest MUI components - Introduced ForwardRef (#224)
* refactor(162): added forwardRef Card

* refactor(162): introduced forwardRefDivider

* refactor(162): introduced forwardRef MuiComponents

* refactor(162): introducing forwardRef

* refactor(162): introduced forwardRef

* refactor(162): introduced forwardRef

* fix(162): fixed link

* fix: fixed port number

* fix: fixed duplicated id

* fix: fixed ref iconbutton

* fix: updated snaps

* fix: fixed port

* fix: fixed eslint errors

* fix: the item should be a button

* fix: fixed eslint errors
2019-10-31 08:12:18 +01:00

55 lines
1.4 KiB
TypeScript

import styled from 'react-emotion';
import React, { useCallback } from 'react';
import { useHistory } from 'react-router-dom';
import Box from '../../muiComponents/Box';
import Button from '../../muiComponents/Button';
import Heading from '../../muiComponents/Heading';
import colors from '../../utils/styles/colors';
import { spacings } from '../../utils/styles/spacings';
import PackageImg from './img/package.svg';
export const NOT_FOUND_TEXT = "Sorry, we couldn't find it...";
export const LABEL_NOT_FOUND = "The page you're looking for doesn't exist.";
export const GO_TO_HOME_PAGE = 'Go to the home page';
const EmptyPackage = styled('img')({
width: '150px',
margin: '0 auto',
});
const StyledHeading = styled(Heading)({
color: colors.primary,
marginBottom: spacings.sm,
});
const NotFound: React.FC = () => {
const history = useHistory();
const handleGoHome = useCallback(() => {
history.push('/');
}, [history]);
return (
<Box
alignItems="center"
data-testid="404"
display="flex"
flexDirection="column"
flexGrow={1}
justifyContent="center"
p={2}>
<EmptyPackage alt="404 - Page not found" src={PackageImg} />
<StyledHeading className="not-found-text" variant="h4">
{NOT_FOUND_TEXT}
</StyledHeading>
<Button onClick={handleGoHome} variant="contained">
{GO_TO_HOME_PAGE}
</Button>
</Box>
);
};
export default NotFound;