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) => (
|
{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>
|
||||||
))}
|
))}
|
||||||
|
|||||||
Reference in New Issue
Block a user