37 lines
No EOL
1.2 KiB
TypeScript
37 lines
No EOL
1.2 KiB
TypeScript
import React from 'react';
|
|
import { motion } from 'framer-motion';
|
|
import { Event } from '../eventData';
|
|
|
|
interface EventCardProps {
|
|
event: Event & {
|
|
formattedDateRange: string;
|
|
};
|
|
}
|
|
|
|
const EventCard: React.FC<EventCardProps> = ({ event }) => {
|
|
return (
|
|
<motion.div
|
|
whileHover={{ scale: 1.05 }}
|
|
className="bg-white rounded-lg shadow-md p-4 w-full max-w-xs border border-gray-200"
|
|
>
|
|
<h2 className="font-bold text-lg text-[#6B1631] mb-2">{event.title}</h2>
|
|
<div className="text-sm text-gray-900 mb-2 font-medium whitespace-pre-line">{event.formattedDateRange}</div>
|
|
<div className="text-sm text-gray-900 mb-2">{event.description}</div>
|
|
<div className="text-sm text-gray-900 mb-2">
|
|
<strong className="font-semibold">Address:</strong> {event.address}
|
|
</div>
|
|
<div className="text-sm text-gray-900">
|
|
<strong className="font-semibold">Contact:</strong>{' '}
|
|
<a
|
|
href={`mailto:${event.email}`}
|
|
className="text-[#8C1D40] hover:text-[#6B1631] underline font-medium hover:no-underline"
|
|
aria-label={`Email ${event.pointOfContact}`}
|
|
>
|
|
{event.pointOfContact}
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default EventCard; |