Merge pull request #3 from PyVersify/Nathan-Bransby-NMT/add-calendar-component

Add calendar component to community page

Author: Nathan-Bransby-NMT

public/events.csv

@@ -0,0 +1,23 @@
+date,title
+2025-01-08,Event 1
+2025-01-22,Event 2
+2025-02-12,Event 3
+2025-02-26,Event 4
+2025-03-12,Event 5
+2025-03-26,Event 6
+2025-04-09,Event 7
+2025-04-23,Event 8
+2025-05-14,Event 9
+2025-05-28,Event 10
+2025-06-11,Event 11
+2025-06-25,Event 12
+2025-07-09,Event 13
+2025-07-23,Event 14
+2025-08-13,Event 15
+2025-08-27,Event 16
+2025-09-10,Event 17
+2025-09-24,Event 18
+2025-10-08,Event 19
+2025-10-22,Event 20
+2025-11-12,Event 21
+2025-11-26,Event 22

src/components/Calendar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+interface Event {
+  date: string;
+  title: string;
+}
+
+interface CalendarProps {
+  events: Event[];
+}
+
+const Calendar: React.FC<CalendarProps> = ({ events }) => {
+  const renderCalendar = () => {
+    // Create a calendar grid for 2025
+    const months = [
+      'January', 'February', 'March', 'April', 'May', 'June',
+      'July', 'August', 'September', 'October', 'November'
+    ];
+
+    return months.map((month, index) => (
+      <div key={index} className="calendar-month">
+        <h3 className="text-lg font-bold mb-2">{month}</h3>
+        <div className="calendar-grid">
+          {events
+            .filter(event => new Date(event.date).getMonth() === index)
+            .map((event, idx) => (
+              <div key={idx} className="calendar-event">
+                <span>{new Date(event.date).getDate()}</span>
+                <span>{event.title}</span>
+              </div>
+            ))}
+        </div>
+      </div>
+    ));
+  };
+
+  return (
+    <div className="calendar-container">
+      {renderCalendar()}
+    </div>
+  );
+};
+
+export default Calendar;

src/components/Community.tsx

@@ -1,12 +1,28 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
+import Calendar from './Calendar';
+import UpcomingEvents from './UpcomingEvents';
+import { fetchEvents } from '../utils/events';
 
 const Community: React.FC = () => {
+  const [events, setEvents] = useState([]);
+
+  useEffect(() => {
+    const loadEvents = async () => {
+      const eventsData = await fetchEvents();
+      setEvents(eventsData);
+    };
+
+    loadEvents();
+  }, []);
+
   return (
     <div className="container mx-auto px-4 py-8">
       <h1 className="text-4xl font-bold mb-4 text-[#4584b6]">Community</h1>
       <p className="text-xl text-gray-600">
         Welcome to the community page! Here you can find information about our community events, forums, and how to get involved.
       </p>
+      <Calendar events={events} />
+      <UpcomingEvents events={events} />
     </div>
   );
 };

src/components/UpcomingEvents.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+interface Event {
+  date: string;
+  title: string;
+}
+
+interface UpcomingEventsProps {
+  events: Event[];
+}
+
+const UpcomingEvents: React.FC<UpcomingEventsProps> = ({ events }) => {
+  const futureEvents = events.filter(event => new Date(event.date) > new Date());
+
+  return (
+    <div className="upcoming-events-container">
+      <h2 className="text-2xl font-bold mb-4 text-[#4584b6]">Upcoming Events</h2>
+      <ul className="upcoming-events-list">
+        {futureEvents.map((event, index) => (
+          <li key={index} className="upcoming-event-item">
+            <span>{new Date(event.date).toLocaleDateString()}</span>
+            <span>{event.title}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export default UpcomingEvents;

src/utils/events.ts

@@ -0,0 +1,17 @@
+import Papa from 'papaparse';
+
+interface Event {
+  date: string;
+  title: string;
+}
+
+export const fetchEvents = async (): Promise<Event[]> => {
+  const response = await fetch('/events.csv');
+  const csvText = await response.text();
+  const parsedData = Papa.parse<Event>(csvText, {
+    header: true,
+    dynamicTyping: true,
+  });
+
+  return parsedData.data;
+};