b9f9f15d77
* feat: builds color palette for light and dark mode, removes all conflicting rgba sass * chore: replaces colors with css vars * chore: adapts blur-bg to be more performant and stable * chore: getting ready for dark mode * chore: removes unused file * chore: reverts input bg * chore: reverses selection in dark mode * feat: builds theme toggler * feat: adds auto mode for theme * feat: establishes light / dark css pattern, updates account and list * chore: migrates more views to gutter component * chore: adapts global, adjusts popups * chore: finishes retrofitting views * feat: moves to medium instead of semi-bold for headlines * feat: introduces new font for rte * feat: updates rich text styles * feat: styles react select in dark mode * chore: styles datepicker, misc refinements * chore: updates style of UploadCard * chore: fixes code styles * chore: styles PerPage * chore: improves styling of column / where selector * feat: improves field errors in dark mode * chore: styles built-in rich text elements * chore: improves styling of rte elements * chore: tweaks
68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
import React, { useEffect } from 'react';
|
|
import { Redirect } from 'react-router-dom';
|
|
import { useConfig } from '../../../../../src/admin/components/utilities/Config';
|
|
|
|
// As this is the demo project, we import our dependencies from the `src` directory.
|
|
import DefaultTemplate from '../../../../../src/admin/components/templates/Default';
|
|
import Button from '../../../../../src/admin/components/elements/Button';
|
|
import Eyebrow from '../../../../../src/admin/components/elements/Eyebrow';
|
|
import { AdminView } from '../../../../../src/config/types';
|
|
import { useStepNav } from '../../../../../src/admin/components/elements/StepNav';
|
|
import Meta from '../../../../../src/admin/components/utilities/Meta';
|
|
import { Gutter } from '../../../../../src/admin/components/elements/Gutter';
|
|
|
|
// In your projects, you can import as follows:
|
|
// import { DefaultTemplate } from 'payload/components/templates';
|
|
// import { Button, Eyebrow, Gutter } from 'payload/components/elements';
|
|
// import { AdminView } from 'payload/config';
|
|
// import { useStepNav } from 'payload/components/hooks';
|
|
// import { Meta } from 'payload/components/utilities';
|
|
|
|
const CustomDefaultRoute: AdminView = ({ user, canAccessAdmin }) => {
|
|
const { routes: { admin: adminRoute } } = useConfig();
|
|
const { setStepNav } = useStepNav();
|
|
|
|
// This effect will only run one time and will allow us
|
|
// to set the step nav to display our custom route name
|
|
|
|
useEffect(() => {
|
|
setStepNav([
|
|
{
|
|
label: 'Custom Route with Default Template',
|
|
},
|
|
]);
|
|
}, [setStepNav]);
|
|
|
|
// If an unauthorized user tries to navigate straight to this page,
|
|
// Boot 'em out
|
|
if (!user || (user && !canAccessAdmin)) {
|
|
return (
|
|
<Redirect to={`${adminRoute}/unauthorized`} />
|
|
);
|
|
}
|
|
|
|
return (
|
|
<DefaultTemplate>
|
|
<Meta
|
|
title="Custom Route with Default Template"
|
|
description="Building custom routes into Payload is easy."
|
|
keywords="Custom React Components, Payload, CMS"
|
|
/>
|
|
<Eyebrow />
|
|
<Gutter>
|
|
<h1>Custom Route</h1>
|
|
<p>Here is a custom route that was added in the Payload config. It uses the Default Template, so the sidebar is rendered.</p>
|
|
<Button
|
|
el="link"
|
|
to={`${adminRoute}`}
|
|
buttonStyle="secondary"
|
|
>
|
|
Go to Dashboard
|
|
</Button>
|
|
</Gutter>
|
|
</DefaultTemplate>
|
|
);
|
|
};
|
|
|
|
export default CustomDefaultRoute;
|