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:
@@ -89,7 +89,7 @@ export function EventList({ events, onEventClick, onRegister, isLoading = false
|
||||
{events.map((event) => (
|
||||
<div
|
||||
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)}
|
||||
>
|
||||
<div className="p-6">
|
||||
@@ -168,18 +168,30 @@ export function EventList({ events, onEventClick, onRegister, isLoading = false
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Action Button */}
|
||||
{event.status === 'upcoming' && onRegister && (
|
||||
{/* Action Area */}
|
||||
<div className="flex items-center justify-between pt-4 border-t border-gray-100">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
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"
|
||||
onClick={() => onEventClick(event)}
|
||||
className="text-blue-600 hover:text-blue-700 font-medium text-sm flex items-center gap-1"
|
||||
>
|
||||
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>
|
||||
)}
|
||||
|
||||
{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>
|
||||
))}
|
||||
|
||||
Reference in New Issue
Block a user