Define a simple page to display an invitation along with the guests included

app/[slug]/site/invitation/[id]/page.tsx

@@ -0,0 +1,41 @@
+/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/
+
+'use client';
+
+import { AbstractApi } from '@/app/api/abstract-api';
+import { Invitation, InvitationSerializer } from '@/app/lib/invitation';
+import { useParams } from 'next/navigation';
+import { TabPanel, TabView } from 'primereact/tabview';
+import { useEffect, useState } from 'react';
+
+
+export default function Page() {
+  const params = useParams<{ slug: string, id: string }>()
+
+  const serializer = new InvitationSerializer();
+  const api = new AbstractApi<Invitation>();
+
+  const [invitation, setInvitation] = useState<Invitation | null>(null);
+
+  useEffect(() => {
+    api.get(serializer, params.id, (invitation) => {
+      setInvitation(invitation);
+    });
+  }, [params.slug, params.id]);
+
+  return (
+  <div>
+    {invitation && (
+    <TabView>
+      {invitation.guests.map((guest, index) => (
+      <TabPanel key={index} header={guest.name}>
+        <div>
+        <p><strong>Name:</strong> {guest.name}</p>
+        </div>
+      </TabPanel>
+      ))}
+    </TabView>
+    )}
+  </div>
+  );
+}

app/[slug]/site/layout.tsx

@@ -0,0 +1,20 @@
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col min-h-screen">
+      {/* Full-width image */}
+      <div className="w-full">
+        <img
+          src="/path-to-your-image.jpg"
+          alt="Wedding Banner"
+          className="w-full h-64 object-cover"
+        />
+      </div>
+
+
+      {/* Body */}
+      <main className="flex-grow p-6 mx-auto" style={{ maxWidth: '60%' }}>
+        {children}
+      </main>
+    </div>
+  );
+}