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

Add an independent scroll for each column

Browse Source
This commit is contained in:
Manuel Bustillo 2025-06-01 14:05:59 +02:00
parent 537c285bd4
commit 54da3212cb
1 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,48 +25,48 @@ export default function InvitationsBoard({ guests, invitations }: {
} }
return ( return (
<div className="flex h-full"> <div className="flex h-screen">
{/* Left Column: Guests */} {/* Left Column: Guests */}
<div className="w-1/4 h-full overflow-y-auto border-r border-gray-300 p-4"> <div className="w-1/4 h-full overflow-auto border-r border-gray-300 p-4">
<h2 className="text-lg font-semibold mb-4">Guests</h2> <h2 className="text-lg font-semibold mb-4">Guests</h2>
<ul> <ul>
{availableGuests.map((guest, index) => ( {availableGuests.map((guest, index) => (
<li <li
key={index} key={index}
className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move" className="mb-4 p-4 border border-gray-300 rounded-lg shadow-sm bg-white cursor-move"
draggable="true" draggable="true"
> >
<h3 className="text-md font-medium">{guest.name}</h3> <h3 className="text-md font-medium">{guest.name}</h3>
</li> </li>
))} ))}
</ul> </ul>
</div> </div>
{/* Right Column: Invitations */} {/* Right Column: Invitations */}
<div className="w-3/4 h-full overflow-y-auto p-4"> <div className="w-3/4 h-full overflow-auto p-4">
<h2 className="text-lg font-semibold mb-4">Invitations</h2> <h2 className="text-lg font-semibold mb-4">Invitations</h2>
<button <button
onClick={handleCreateInvitation} onClick={handleCreateInvitation}
className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600" className="mb-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
>
Create New Invitation
</button>
<div className="grid grid-cols-3 gap-4">
{invitations.map((invitation, index) => (
<div
key={invitation.id}
className="flex items-center justify-center h-32 w-full bg-green-600 border border-green-700"
> >
Create New Invitation <ul className="text-center text-yellow-500 font-cursive text-lg">
</button> {invitation.guests.map((guest) => (
<li key={guest.id}>{guest.name}</li>
<div className="grid grid-cols-3 gap-4">
{invitations.map((invitation, index) => (
<div
key={invitation.id}
className="flex items-center justify-center h-32 w-full bg-green-600 border border-green-700"
>
<ul className="text-center text-yellow-500 font-cursive text-lg">
{invitation.guests.map((guest) => (
<li key={guest.id}>{guest.name}</li>
))}
</ul>
</div>
))} ))}
</ul>
</div> </div>
))}
</div>
</div> </div>
</div> </div>
); );