bc98567f41
**BREAKING:** All `@payloadcms/ui/client` exports have been renamed to `@payloadcms/ui`. A simple find & replace across your entire project will be enough to migrate. This change greatly improves import auto-completions in IDEs which lack proper support for package.json exports, like Webstorm.
48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
'use client'
|
|
import { Button, Gutter, useConfig, useStepNav, useTranslation } from '@payloadcms/ui'
|
|
import LinkImport from 'next/link.js'
|
|
import React, { useEffect } from 'react'
|
|
|
|
import './index.scss'
|
|
|
|
const baseClass = 'not-found'
|
|
|
|
const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
|
|
|
|
export const NotFoundClient: React.FC<{
|
|
marginTop?: 'large'
|
|
}> = (props) => {
|
|
const { marginTop = 'large' } = props
|
|
|
|
const { setStepNav } = useStepNav()
|
|
const { t } = useTranslation()
|
|
|
|
const {
|
|
routes: { admin },
|
|
} = useConfig()
|
|
|
|
useEffect(() => {
|
|
setStepNav([
|
|
{
|
|
label: t('general:notFound'),
|
|
},
|
|
])
|
|
}, [setStepNav, t])
|
|
|
|
return (
|
|
<div
|
|
className={[baseClass, marginTop && `${baseClass}--margin-top-${marginTop}`]
|
|
.filter(Boolean)
|
|
.join(' ')}
|
|
>
|
|
<Gutter className={`${baseClass}__wrap`}>
|
|
<h1>{t('general:nothingFound')}</h1>
|
|
<p>{t('general:sorryNotFound')}</p>
|
|
<Button Link={Link} className={`${baseClass}__button`} el="link" to={`${admin}`}>
|
|
{t('general:backToDashboard')}
|
|
</Button>
|
|
</Gutter>
|
|
</div>
|
|
)
|
|
}
|