bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 14 Actions Packages Projects Releases Wiki Activity

Display empty invitations

Browse Source
This commit is contained in:
Manuel Bustillo 2025-06-01 15:35:02 +02:00
parent 16cd9e6175
commit ecc2550146
1 changed files with 47 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
app/ui/invitations/board.tsx
View File

@ -18,6 +18,13 @@ export default function InvitationsBoard({ guests, invitations }: {
)
);
// Sort invitations to display those without guests at the top
const sortedInvitations = [...invitations].sort((a, b) => {
if (a.guests.length === 0 && b.guests.length > 0) return -1;
if (a.guests.length > 0 && b.guests.length === 0) return 1;
return 0;
});
function handleCreateInvitation() {
api.create(serializer, new Invitation(), () => {
console.log("Invitation created successfully");
@ -56,17 +63,23 @@ export default function InvitationsBoard({ guests, invitations }: {
</button>
<div className="grid grid-cols-4 gap-6">
{invitations.map((invitation, index) => (
{sortedInvitations.map((invitation, index) => (
<div
key={invitation.id}
className="flex items-center justify-center w-full bg-green-800 border border-green-900"
style={{ aspectRatio: "1.618 / 1" }}
>
<ul className="text-center text-yellow-500 font-cursive text-lg">
{invitation.guests.length === 0 ? (
<p className="text-center text-yellow-500 text-lg italic">
(empty invitation)
</p>
) : (
<ul className="text-center text-yellow-500 text-lg">
{invitation.guests.map((guest) => (
<li key={guest.id}>{guest.name}</li>
))}
</ul>
)}
</div>
))}
</div>