chaulmark/deafmissoula-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fixed home, calendar, and mobile elements

Browse source
This commit is contained in:
TheMaddax 2024-10-14 20:27:39 -05:00
parent e47efca847
commit 630ea7d32f
3 changed files with 9 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/src/components/Calendar.tsx
View file

@ -16,13 +16,11 @@ export const formatDateRange = (startDate: string, startTime: string, endDate: s
const end = parseISO(`${endDate}T${endTime}`);
if (isSameDay(start, end)) {
return `${format(start, 'MMMM d, yyyy')} ${formatTime(startDate, startTime)} - ${formatTime(endDate, endTime)}`;
return `${format(start, 'MMMM d, yyyy')}\n${formatTime(startDate, startTime)} - ${formatTime(endDate, endTime)}`;
} else {
return `${format(start, 'MMMM d, yyyy h:mm a')} - ${format(end, 'MMMM d, yyyy h:mm a')}`;
return `${format(start, 'MMMM d, yyyy')}\n${formatTime(startDate, startTime)} - ${format(end, 'MMMM d, yyyy')}\n${formatTime(endDate, endTime)}`;
}
};
const EventPopup: React.FC<{ event: Event; position: { top: number; left: number }; onClose: () => void }> = ({ event, position, onClose }) => (
};const EventPopup: React.FC<{ event: Event; position: { top: number; left: number }; onClose: () => void }> = ({ event, position, onClose }) => (
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
@ -35,7 +33,7 @@ const EventPopup: React.FC<{ event: Event; position: { top: number; left: number
onClick={(e) => e.stopPropagation()}
>
<h3 className="font-bold text-lg">{event.title}</h3>
<p className="text-sm">{formatDateRange(event.date, event.startTime, event.date, event.endTime)}</p>
<p className="text-sm whitespace-pre-line">{formatDateRange(event.date, event.startTime, event.date, event.endTime)}</p>
<p className="text-sm mt-2">{event.description}</p>
<p className="text-sm mt-2">Contact: <a href={`mailto:${event.email}`} className="text-blue-500 hover:underline">{event.pointOfContact}</a></p>
</motion.div>

2
client/src/components/EventCard.tsx
View file

@ -15,7 +15,7 @@ const EventCard: React.FC<EventCardProps> = ({ event }) => {
className="bg-white rounded-lg shadow-md p-4 w-full max-w-xs"
>
<h3 className="font-bold text-lg text-[#8C1D40] mb-2">{event.title}</h3>
<p className="text-sm text-gray-600 mb-2">{event.formattedDateRange}</p>
<p className="text-sm text-gray-600 mb-2 whitespace-pre-line">{event.formattedDateRange}</p>
<p className="text-sm mb-2">{event.description}</p>
<p className="text-sm">Contact: <a href={`mailto:${event.email}`} className="text-blue-500 hover:underline">{event.pointOfContact}</a></p>
</motion.div>

9
client/src/components/Home.tsx
View file

@ -34,9 +34,8 @@ const Home: React.FC = () => {
<h1 className="text-3xl md:text-4xl font-bold text-[#8C1D40] mb-8 text-center">Welcome to MCDi</h1>
<ImageCarousel />
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
<div className="space-y-8">
<div className="flex flex-col lg:flex-row gap-8">
<div className="lg:w-1/2 flex flex-col gap-8">
<InfoCard
title="Empowering Deaf Culture and Community"
content="We're proud to be the Missoula Council of the Deaf, Inc. (MCDi) in the heart of Missoula, Montana. Our organization is dedicated to promoting Deaf culture, community, and systematic change in our beautiful state."
@ -46,7 +45,7 @@ const Home: React.FC = () => {
content="Just as Montana's vast landscapes showcase breathtaking vistas, our Deaf community brings unique perspectives and experiences to the table. We're proud to celebrate Deaf culture, language, and traditions that enrich our human kaleidoscope."
/>
</div>
<div>
<div className="lg:w-1/2">
<h2 className="text-2xl font-semibold text-[#8C1D40] mb-4">Upcoming Events</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
{upcomingEvents.map((event, index) => (
@ -91,4 +90,4 @@ const InfoCard: React.FC<{ title: string; content: string }> = ({ title, content
</motion.div>
);
export default Home;
export default Home;