Create post preview component

payload.config.ts

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

src/components/PreviewPostPage.tsx

@@ -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} />
+}