Create post preview component

This commit is contained in:
tobias 2024-06-24 13:39:37 +02:00
parent 5d652dc606
commit 7943ffbd55
2 changed files with 37 additions and 2 deletions

View File

@ -43,9 +43,8 @@ export default buildConfig({
}, },
livePreview: { livePreview: {
url: ({ data, locale }) => url: ({ data, locale }) =>
//TODO: Rewrite to collection_slug/preview/
`${process.env.BASE_URL}/preview${data.path}${locale ? `?locale=${locale.code}` : ''}`, `${process.env.BASE_URL}/preview${data.path}${locale ? `?locale=${locale.code}` : ''}`,
collections: [COLLECTION_SLUG_PAGE], collections: [COLLECTION_SLUG_PAGE, COLLECTION_SLUG_POST],
}, },
}, },
editor: lexicalEditor(), editor: lexicalEditor(),

View File

@ -0,0 +1,36 @@
'use client'
import type { Post } from 'types/payload-types'
import { useLivePreview } from '@payloadcms/live-preview-react'
import PostPage from './PostPage'
const defaultPost: Post = {
id: 'default-id',
title: 'Title',
thumbnail: '',
updatedAt: '',
createdAt: '',
}
export default function PreviewBlocks({
initialData,
locale,
url,
}: {
initialData?: Post | null
locale: string
url: string
}) {
const { data } = useLivePreview({
serverURL: url,
depth: 3,
initialData: initialData,
})
const post = {
...defaultPost,
...data,
}
return <PostPage post={post} locale={locale} />
}