Erste brauchbare Version

components/EndPreviewButton.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+
+export default function EndPreviewButton() {
+  	const router = useRouter();
+
+	const endPreview = () => {
+		// Cookie entfernen
+		document.cookie = 'payload-preview=; Max-Age=0; Path=/';
+
+		// ?preview entfernen
+    	const url = new URL(window.location.href);
+		url.searchParams.delete('preview');
+
+		// Neuladen
+		router.replace(url.pathname + url.search);
+		router.refresh();
+	};
+	
+	return (
+		<button
+			className="fixed bottom-0 left-0 bg-red-500 rounded-md p-2 m-2 text-sm text-white cursor-pointer"
+			onClick={endPreview}
+		>
+			Preview beenden
+		</button>
+	);
+}

components/PayloadInjects.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import Image from 'next/image';
+import { Button } from '@payloadcms/ui';
+
+export function Logo() {
+	return (
+		<Image
+			src="/logo.png"
+			width={7845}
+			height={956}
+			alt=""
+		/>
+	);
+}
+
+export function Icon() {
+	return (
+		<Image
+			src="/icon.png"
+			width={836}
+			height={956}
+			alt=""
+		/>
+	);
+}
+
+export function Action() {
+	function goToSite() {
+		window.location.href = window.location.origin;
+	}
+
+	return (
+		<Button onClick={goToSite}>
+			Zur Website wechseln
+		</Button>
+	);
+}

components/RefreshRouteOnSave.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import { useRouter } from 'next/navigation';
+import { RefreshRouteOnSave as PayloadLivePreview } from '@payloadcms/live-preview-react';
+
+export default function RefreshRouteOnSave() {
+	const router = useRouter();
+
+	return (
+		<PayloadLivePreview
+			refresh={() => router.refresh()}
+			serverURL={process.env.NEXT_PUBLIC_PAYLOAD_URL ?? ''}
+		/>
+	);
+}