Improve event card clickability and add View Details button

- Add hover border effect to event cards for better visual feedback
- Add explicit 'View Details' button to each event card
- Rename register button to 'Quick Register' for clarity
- Makes it obvious that cards are clickable to view full details
This commit is contained in:
2025-11-16 20:26:32 +00:00
parent 25f8c46d7f
commit 529cdd0c05

View File

@@ -89,7 +89,7 @@ export function EventList({ events, onEventClick, onRegister, isLoading = false
{events.map((event) => ( {events.map((event) => (
<div <div
key={event.id} key={event.id}
className="bg-white rounded-lg shadow hover:shadow-md transition-shadow cursor-pointer" className="bg-white rounded-lg shadow hover:shadow-lg transition-all cursor-pointer border-2 border-transparent hover:border-blue-200"
onClick={() => onEventClick(event)} onClick={() => onEventClick(event)}
> >
<div className="p-6"> <div className="p-6">
@@ -168,18 +168,30 @@ export function EventList({ events, onEventClick, onRegister, isLoading = false
</div> </div>
)} )}
{/* Action Button */} {/* Action Area */}
{event.status === 'upcoming' && onRegister && ( <div className="flex items-center justify-between pt-4 border-t border-gray-100">
<button <button
onClick={(e) => { onClick={() => onEventClick(event)}
e.stopPropagation(); className="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center gap-1"
onRegister(event.id);
}}
className="w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm"
> >
Register for Event View Details
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
</svg>
</button> </button>
)}
{event.status === 'upcoming' && onRegister && (
<button
onClick={(e) => {
e.stopPropagation();
onRegister(event.id);
}}
className="bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors font-medium text-sm"
>
Quick Register
</button>
)}
</div>
</div> </div>
</div> </div>
))} ))}