feat(templates): add live preview breakpoints for mobile, tablet and desktop to website template (#7384)

2024-07-26 10:41:59 -04:00
parent a64f37e014
commit 4704c8db2a
1 changed files with 22 additions and 0 deletions
--- a/templates/website/src/payload.config.ts
+++ b/templates/website/src/payload.config.ts
@@ -58,6 +58,28 @@ export default buildConfig({
      beforeDashboard: [BeforeDashboard],
    },
    user: Users.slug,
+    livePreview: {
+      breakpoints: [
+        {
+          label: 'Mobile',
+          name: 'mobile',
+          width: 375,
+          height: 667,
+        },
+        {
+          label: 'Tablet',
+          name: 'tablet',
+          width: 768,
+          height: 1024,
+        },
+        {
+          label: 'Desktop',
+          name: 'desktop',
+          width: 1440,
+          height: 900,
+        },
+      ],
+    },
  },
  // This config helps us configure global or default features that the other editors can inherit
  editor: lexicalEditor({