Update events, minutes viewing, and facebook logo
This commit is contained in:
parent
da626f5478
commit
0dbdaf59f7
3 changed files with 73 additions and 62 deletions
|
|
@ -102,8 +102,8 @@ const Footer: React.FC = () => {
|
||||||
className="inline-block mt-4 transition-transform duration-300 ease-in-out transform hover:scale-110"
|
className="inline-block mt-4 transition-transform duration-300 ease-in-out transform hover:scale-110"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src="logos/facebook-logo.png"
|
src="/logos/facebook-logo.png"
|
||||||
alt="Facebook"
|
alt="Facebook Logo"
|
||||||
className="w-10 h-10 rounded-full shadow-lg hover:shadow-xl"
|
className="w-10 h-10 rounded-full shadow-lg hover:shadow-xl"
|
||||||
style={{
|
style={{
|
||||||
filter: 'drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1))',
|
filter: 'drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.1))',
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useState } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { motion } from 'framer-motion';
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
|
||||||
interface MinuteEntry {
|
interface MinuteEntry {
|
||||||
date: string;
|
date: string;
|
||||||
|
|
@ -21,6 +21,19 @@ const minutesData: MinuteEntry[] = [
|
||||||
const Minutes: React.FC = () => {
|
const Minutes: React.FC = () => {
|
||||||
const [sortColumn, setSortColumn] = useState<keyof MinuteEntry>('date');
|
const [sortColumn, setSortColumn] = useState<keyof MinuteEntry>('date');
|
||||||
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('desc');
|
||||||
|
const [selectedMinutes, setSelectedMinutes] = useState<MinuteEntry | null>(null);
|
||||||
|
const [isMobile, setIsMobile] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkMobile = () => {
|
||||||
|
setIsMobile(window.innerWidth < 768);
|
||||||
|
};
|
||||||
|
|
||||||
|
checkMobile();
|
||||||
|
window.addEventListener('resize', checkMobile);
|
||||||
|
|
||||||
|
return () => window.removeEventListener('resize', checkMobile);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const sortedMinutes = [...minutesData].sort((a, b) => {
|
const sortedMinutes = [...minutesData].sort((a, b) => {
|
||||||
if (a[sortColumn] < b[sortColumn]) return sortDirection === 'asc' ? -1 : 1;
|
if (a[sortColumn] < b[sortColumn]) return sortDirection === 'asc' ? -1 : 1;
|
||||||
|
|
@ -37,6 +50,18 @@ const Minutes: React.FC = () => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const handleMinutesClick = (entry: MinuteEntry) => {
|
||||||
|
if (isMobile) {
|
||||||
|
window.open(entry.fileUrl, '_blank');
|
||||||
|
} else {
|
||||||
|
setSelectedMinutes(entry);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const closePopup = () => {
|
||||||
|
setSelectedMinutes(null);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container mx-auto px-4 py-8">
|
<div className="container mx-auto px-4 py-8">
|
||||||
<motion.div
|
<motion.div
|
||||||
|
|
@ -62,19 +87,18 @@ const Minutes: React.FC = () => {
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
{sortedMinutes.map((entry, index) => ( <tr key={index} className="border-b border-gray-200 hover:bg-gray-100">
|
{sortedMinutes.map((entry, index) => (
|
||||||
|
<tr key={index} className="border-b border-gray-200 hover:bg-gray-100">
|
||||||
<td className="py-3 px-4">{entry.date}</td>
|
<td className="py-3 px-4">{entry.date}</td>
|
||||||
<td className="py-3 px-4">{entry.meetingType}</td>
|
<td className="py-3 px-4">{entry.meetingType}</td>
|
||||||
<td className="py-3 px-4">{entry.location}</td>
|
<td className="py-3 px-4">{entry.location}</td>
|
||||||
<td className="py-3 px-4">
|
<td className="py-3 px-4">
|
||||||
<a
|
<button
|
||||||
href={entry.fileUrl}
|
onClick={() => handleMinutesClick(entry)}
|
||||||
target="_blank"
|
className="bg-[#8C1D40] text-white font-bold py-2 px-4 rounded hover:bg-[#6B1631] transition duration-300"
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="text-blue-600 hover:text-blue-800 underline"
|
|
||||||
>
|
>
|
||||||
View Minutes
|
View Minutes
|
||||||
</a>
|
</button>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
))}
|
))}
|
||||||
|
|
@ -82,6 +106,43 @@ const Minutes: React.FC = () => {
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{selectedMinutes && !isMobile && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ opacity: 0 }}
|
||||||
|
animate={{ opacity: 1 }}
|
||||||
|
exit={{ opacity: 0 }}
|
||||||
|
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
|
||||||
|
onClick={closePopup}
|
||||||
|
>
|
||||||
|
<motion.div
|
||||||
|
initial={{ scale: 0.9, opacity: 0 }}
|
||||||
|
animate={{ scale: 1, opacity: 1 }}
|
||||||
|
exit={{ scale: 0.9, opacity: 0 }}
|
||||||
|
className="bg-white rounded-lg p-4 w-[90%] h-[90%] flex flex-col"
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
>
|
||||||
|
<h2 className="text-2xl font-bold text-[#8C1D40] mb-4">
|
||||||
|
{selectedMinutes.meetingType} - {selectedMinutes.date}
|
||||||
|
</h2>
|
||||||
|
<div className="flex-grow">
|
||||||
|
<iframe
|
||||||
|
src={`${selectedMinutes.fileUrl}#view=FitH`}
|
||||||
|
className="w-full h-full rounded-md"
|
||||||
|
title={`Minutes for ${selectedMinutes.meetingType} on ${selectedMinutes.date}`}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={closePopup}
|
||||||
|
className="mt-4 bg-[#8C1D40] text-white font-bold py-2 px-4 rounded hover:bg-[#6B1631] transition duration-300 self-end"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
</motion.div>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -10,56 +10,6 @@ export interface Event {
|
||||||
}
|
}
|
||||||
|
|
||||||
export const events: Event[] = [
|
export const events: Event[] = [
|
||||||
{
|
|
||||||
date: '2024-11-01',
|
|
||||||
title: 'ASL Night Out!',
|
|
||||||
description: 'Cornhole Tournament - will have 3 rows of cornholes and will do elimination for winner',
|
|
||||||
startTime: '18:00',
|
|
||||||
endTime: '20:00',
|
|
||||||
pointOfContact: 'Tessa Williams',
|
|
||||||
email: 'tessa.williams@deafmissoula.org',
|
|
||||||
address: 'To be announced'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2024-11-02',
|
|
||||||
title: 'Missoula Concealed Weapons Class',
|
|
||||||
description: 'Concealed weapons course at Cabela\'s',
|
|
||||||
startTime: '10:00',
|
|
||||||
endTime: '14:00',
|
|
||||||
pointOfContact: 'Kevin Cooley',
|
|
||||||
email: 'kevin.cooley@deafmissoula.org',
|
|
||||||
address: '3650 Brooks Street, Missoula, MT 59801'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2024-11-28',
|
|
||||||
title: 'Thanksgiving Volunteer',
|
|
||||||
description: 'Volunteer at Missoula Food Bank and Community Center with us',
|
|
||||||
startTime: '10:00',
|
|
||||||
endTime: '13:00',
|
|
||||||
pointOfContact: 'Aubz M',
|
|
||||||
email: 'aubz.m@deafmissoula.org',
|
|
||||||
address: '1720 Wyoming St, Missoula, MT 59801'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2024-12-06',
|
|
||||||
title: 'ASL Black Tie and Gown',
|
|
||||||
description: 'Time to dress up in your finest clothes for a night of dancing and rocking the fabulous looks',
|
|
||||||
startTime: '19:00',
|
|
||||||
endTime: '23:00',
|
|
||||||
pointOfContact: 'Rita Brandborg',
|
|
||||||
email: 'rita.brandborg@deafmissoula.org',
|
|
||||||
address: '101 Central Avenue, Whitefish, MT 59937'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: '2024-12-24',
|
|
||||||
title: 'Christmas Cheer Volunteer',
|
|
||||||
description: 'Volunteer at Missoula Food Bank and Community Center',
|
|
||||||
startTime: '10:00',
|
|
||||||
endTime: '12:00',
|
|
||||||
pointOfContact: 'Tessa Williams',
|
|
||||||
email: 'tessa.williams@deafmissoula.org',
|
|
||||||
address: '1720 Wyoming St, Missoula, MT 59801'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
date: '2025-01-11',
|
date: '2025-01-11',
|
||||||
title: 'MCDi Members Meeting',
|
title: 'MCDi Members Meeting',
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue