c024754
import { useT } from '@app/i18n'
import { Button } from '@app/ui'
import { useEffect } from 'react'
import { Link } from 'react-router-dom'
/**
* Fallback screen for unmatched routes.
* It is a route-level composition, so it is a page slice rather than app UI.
*/
export function NotFoundPage() {
const { t } = useT()
// A 404 can be the first paint of a fresh tab, so give it a real title.
useEffect(() => {
document.title = `${t('error.notFound.title')} · ${t('common.app.name')}`
}, [t])
return (
<main className="grid min-h-screen place-content-center gap-4 p-8 text-center">
<p className="text-7xl font-semibold tracking-tight text-slate-300">404</p>
<h1 className="text-xl">{t('error.notFound.title')}</h1>
<p className="max-w-sm text-sm text-slate-500">{t('error.notFound.body')}</p>
<div className="justify-self-center">
<Link to="/app/@me">
<Button>{t('error.notFound.back')}</Button>
</Link>
</div>
</main>
)
}