From 7943ffbd550da5a0f3f5cf8e59f4f8dec06a90b7 Mon Sep 17 00:00:00 2001
From: tobias <tobias-ahlqvist@outlook.com>
Date: Mon, 24 Jun 2024 13:39:37 +0200
Subject: [PATCH] Create post preview component

---
 payload.config.ts                  |  3 +--
 src/components/PreviewPostPage.tsx | 36 ++++++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 src/components/PreviewPostPage.tsx

diff --git a/payload.config.ts b/payload.config.ts
index 18867ef..dc708e0 100644
--- a/payload.config.ts
+++ b/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(),
diff --git a/src/components/PreviewPostPage.tsx b/src/components/PreviewPostPage.tsx
new file mode 100644
index 0000000..5639c16
--- /dev/null
+++ b/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} />
+}