Files
payload/test/admin/components/views/CustomDefault/index.tsx
2024-03-20 11:09:22 -04:00

77 lines
2.1 KiB
TypeScript

import { DefaultTemplate } from '@payloadcms/ui/templates/Default'
import LinkImport from 'next/link.js'
import { redirect } from 'next/navigation.js'
import React from 'react'
import type { AdminViewProps } from '../../../../../packages/payload/types.js'
const Link = (LinkImport.default || LinkImport) as unknown as typeof LinkImport.default
import { Button } from '@payloadcms/ui/elements/Button'
import { SetStepNav } from '@payloadcms/ui/elements/StepNav'
import { customViewPath } from '../../../shared.js'
import './index.scss'
const baseClass = 'custom-default-view'
export const CustomDefaultView: React.FC<AdminViewProps> = ({ initPageResult }) => {
const {
permissions,
req: {
i18n,
payload: {
config,
config: {
routes: { admin: adminRoute },
},
},
user,
},
} = initPageResult
// If an unauthorized user tries to navigate straight to this page,
// Boot 'em out
if (!user || (user && !permissions?.canAccessAdmin)) {
return redirect(`${adminRoute}/unauthorized`)
}
return (
<DefaultTemplate config={config} i18n={i18n} permissions={permissions} user={user}>
<SetStepNav
nav={[
{
label: 'Custom Admin View with Default Template',
},
]}
/>
<div
className={`${baseClass}__content`}
style={{
paddingLeft: 'var(--gutter-h)',
paddingRight: 'var(--gutter-h)',
}}
>
<h1>Custom Admin View</h1>
<p>
Here is a custom admin view that was added in the Payload config. It uses the Default
Template, so the sidebar is rendered.
</p>
<div className="custom-view__controls">
<Button Link={Link} buttonStyle="secondary" el="link" to={`${adminRoute}`}>
Go to Dashboard
</Button>
&nbsp; &nbsp; &nbsp;
<Button
Link={Link}
buttonStyle="secondary"
el="link"
to={`${adminRoute}/${customViewPath}`}
>
Go to Custom View
</Button>
</div>
</div>
</DefaultTemplate>
)
}