Skip to content

Commit

Permalink
feat(404-page): upgrade 404 page animations
Browse files Browse the repository at this point in the history
upgrade TitleWithDivider to use all available props - no breaking changes
  • Loading branch information
MathiasKandelborg committed Nov 2, 2020
1 parent 7a36203 commit d739cba
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 15 deletions.
8 changes: 4 additions & 4 deletions components/HoC/TitleWithDivider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,15 @@ interface ITitleDividerProps extends MUI.TypographyProps {
}

const TitleWithDivider: React.FC<ITitleDividerProps> = (props) => {
const { text, variant, gutterBottom } = props
const { text, color, ...rest } = props

return (
<MUI.Grid item xs={12}>
<TitleAnimation>
<MUI.Typography
color="primary"
variant={variant}
gutterBottom={gutterBottom}>
color={color || 'primary'}
// eslint-disable-next-line react/jsx-props-no-spreading
{...rest}>
{text}
</MUI.Typography>
</TitleAnimation>
Expand Down
32 changes: 21 additions & 11 deletions pages/404.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
import TitleWithDivider from '@components/HoC/TitleWithDivider'
import { PageAnimation } from '@components/UI'
import * as MUI from '@material-ui/core'
import { lpar } from '@util/characters'
import { PageProps } from 'PageProps'

const Page404: React.FC<PageProps> = () => (
<PageAnimation layoutID="layout">
<MUI.Typography variant="h1" color="primary" gutterBottom align="center">
404 - Page Not Found :{lpar}
</MUI.Typography>
<>
<TitleWithDivider
align="center"
variant="h1"
text={`
404 - Page Not Found :${lpar}`}
/>
{/* TODO: Make this a Framer animation to showcase and make errors more fun */}
<MUI.Typography variant="h2" color="secondary" gutterBottom align="center">
Redirecting in 10 seconds...
</MUI.Typography>
<MUI.Button fullWidth size="large">
Go to front page?
</MUI.Button>
</PageAnimation>
<PageAnimation layoutID="layout">
<MUI.Typography
variant="h2"
color="secondary"
gutterBottom
align="center">
Redirecting in 10 seconds...
</MUI.Typography>
<MUI.Button fullWidth size="large">
Go to front page?
</MUI.Button>
</PageAnimation>
</>
)

export default Page404

0 comments on commit d739cba

Please sign in to comment.