brian/briannelson.dev
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added adminbar to layout

Browse Source
This commit is contained in:
Brian Nelson
2025-10-10 13:35:09 -04:00
parent d8fbcbbf4d
commit 8bf4c7516f
13 changed files with 157 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/(frontend)/layout.tsx
View File

@@ -1,5 +1,6 @@
import React from 'react'
import './styles.css'
import { AdminBar } from '@/src/components/AdminBar'
export const metadata = {
description: 'A blank template using Payload in a Next.js app.',
@@ -12,6 +13,7 @@ export default async function RootLayout(props: { children: React.ReactNode }) {
return (
<html lang="en">
<body>
<AdminBar />
<main>{children}</main>
</body>
</html>

13
src/app/(frontend)/page.tsx
View File

@@ -3,9 +3,8 @@ import Image from 'next/image'
import { getPayload } from 'payload'
import type { Payload } from 'payload'
import React from 'react'
import { fileURLToPath } from 'url'
import config from '@/payload.config'
import config from '@/src/payload.config'
import './styles.css'
import { RichText } from '@payloadcms/richtext-lexical/react'
@@ -15,8 +14,6 @@ export default async function HomePage() {
const payload = await getPayload({ config: payloadConfig })
const { user } = await payload.auth({ headers })
const fileURL = `vscode://file/${fileURLToPath(import.meta.url)}`
const homePage = await payload.find({
collection: 'pages',
where: {
@@ -28,8 +25,6 @@ export default async function HomePage() {
const page = homePage.docs?.[0]
console.log(page)
return (
<div className="home">
<div className="content">
@@ -53,7 +48,7 @@ export default async function HomePage() {
/>
</picture>
{!user && <h1>Welcome to your new project.</h1>}
{user && <h1>Welcome back, {user.email}</h1>}
{user && <h1>Welcome back, {user.name}</h1>}
<div className="links">
<a
className="admin"
@@ -75,9 +70,7 @@ export default async function HomePage() {
</div>
<div className="footer">
<p>Update this page by editing</p>
<a className="codeLink" href={fileURL}>
<code>app/(frontend)/page.tsx</code>
</a>
<code>app/(frontend)/page.tsx</code>
</div>
</div>
)

4
src/app/(payload)/admin/importMap.js
View File

@@ -22,6 +22,7 @@ import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93
import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
import { SlugField as SlugField_3817bf644402e67bfe6577f60ef982de } from '@payloadcms/ui'
export const importMap = {
"@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
@@ -47,5 +48,6 @@ export const importMap = {
"@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
"@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
"@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
"@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864
"@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
"@payloadcms/ui#SlugField": SlugField_3817bf644402e67bfe6577f60ef982de
}

7
src/collections/Page.ts
View File

@@ -1,5 +1,6 @@
import { lexicalEditor } from '@payloadcms/richtext-lexical'
import type { CollectionConfig } from 'payload'
import { slugField } from 'payload'
export const Page: CollectionConfig = {
slug: 'pages',
@@ -7,9 +8,6 @@ export const Page: CollectionConfig = {
title: true,
slug: true,
},
access: {
read: () => true,
},
admin: {
defaultColumns: ['title', 'slug', 'updatedAt',],
},
@@ -22,6 +20,7 @@ export const Page: CollectionConfig = {
{
name: 'richText',
type: 'richText'
}
},
slugField(),
],
}

7
src/components/AdminBar/index.scss Normal file
View File

@@ -0,0 +1,7 @@
@import '~@payloadcms/ui/scss';
.admin-bar {
@include small-break {
display: none;
}
}

89
src/components/AdminBar/index.tsx Normal file
View File

@@ -0,0 +1,89 @@
'use client'
import type { PayloadAdminBarProps, PayloadMeUser } from '@payloadcms/admin-bar'
import { cn } from '@/utilities/ui'
import { useSelectedLayoutSegments } from 'next/navigation'
import { PayloadAdminBar } from '@payloadcms/admin-bar'
import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import './index.scss'
import { getClientSideURL } from '@/utilities/getURL'
const baseClass = 'admin-bar'
const collectionLabels = {
pages: {
plural: 'Pages',
singular: 'Page',
},
posts: {
plural: 'Posts',
singular: 'Post',
},
projects: {
plural: 'Projects',
singular: 'Project',
},
}
const Title: React.FC = () => <span>Dashboard</span>
export const AdminBar: React.FC<{
adminBarProps?: PayloadAdminBarProps
}> = (props) => {
const { adminBarProps } = props || {}
const segments = useSelectedLayoutSegments()
const [show, setShow] = useState(false)
const collection = (
collectionLabels[segments?.[1] as keyof typeof collectionLabels] ? segments[1] : 'pages'
) as keyof typeof collectionLabels
const router = useRouter()
const onAuthChange = React.useCallback((user: PayloadMeUser) => {
setShow(Boolean(user?.id))
}, [])
return (
<div
className={cn(baseClass, 'py-2 bg-black text-white', {
block: show,
hidden: !show,
})}
>
<div className="container">
<PayloadAdminBar
{...adminBarProps}
className="py-2 text-white"
classNames={{
controls: 'font-medium text-white',
logo: 'text-white',
user: 'text-white',
}}
cmsURL={getClientSideURL()}
collectionSlug={collection}
collectionLabels={{
plural: collectionLabels[collection]?.plural || 'Pages',
singular: collectionLabels[collection]?.singular || 'Page',
}}
logo={<Title />}
onAuthChange={onAuthChange}
onPreviewExit={() => {
fetch('/next/exit-preview').then(() => {
router.push('/')
router.refresh()
})
}}
style={{
backgroundColor: 'transparent',
padding: 0,
position: 'relative',
zIndex: 'unset',
}}
/>
</div>
</div>
)
}

7
src/payload-types.ts
View File

@@ -182,6 +182,11 @@ export interface Page {
};
[k: string]: unknown;
} | null;
/**
* When enabled, the slug will auto-generate from the title field on save and autosave.
*/
generateSlug?: boolean | null;
slug: string;
updatedAt: string;
createdAt: string;
}
@@ -295,6 +300,8 @@ export interface MediaSelect<T extends boolean = true> {
export interface PagesSelect<T extends boolean = true> {
title?: T;
richText?: T;
generateSlug?: T;
slug?: T;
updatedAt?: T;
createdAt?: T;
}