Mave/event attendance modal

app/event-attendance/EventAttendance.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import './EventAttendance.css';
+
+//should be removed after Volunteer component is created
+interface Volunteer {
+  id: number;
+  name: string;
+  attended: boolean;
+}
+
+//should be removed after event component is created
+interface EventProps {
+  name: string;
+  start: string;
+  end: string;
+  volunteers: Volunteer[];
+  description: string;
+}
+
+interface EventAttendanceProps {
+  event: EventProps;
+  updateAttendance: (volunteerId: number, attended: boolean) => void;
+}
+
+//should be updated after volunteer/event components are created
+const Content: React.FC<EventAttendanceProps> = ({ event, updateAttendance }) => {
+  return (
+    <div className="event-attendance-container">
+      <div className="event-details">
+        <h2>{event.name}</h2>
+        <p>{event.description}</p>
+      </div>
+      <div className="volunteer-list">
+        {event.volunteers.map(volunteer => (
+          <div className="volunteer-item" key={volunteer.id}>
+            <span>{volunteer.name}</span>
+            <input
+              type="checkbox"
+              checked={volunteer.attended}
+              onChange={(e) => updateAttendance(volunteer.id, e.target.checked)}
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Content;

app/event-attendance/page.tsx

@@ -0,0 +1,34 @@
+'use client';
+import React, { useState} from 'react';
+import EventAttendance from './EventAttendance';
+
+const EventAttendancePage = () => {
+    const [event, setEvent] = useState({
+        name: 'Sample Event',
+        start: '2024-02-01 09:00 PST',
+        end: '2024-02-01 11:00 PST',
+        volunteers: [
+            { id: 1, name: 'Volunteer 1', attended: false },
+            { id: 2, name: 'Volunteer 2', attended: false },
+            { id: 3, name: 'Volunteer 3', attended: false }
+        ],
+        description: 'This is a sample event description.'
+    });
+
+    const updateAttendance = (volunteerId: number, attended: boolean) => {
+        setEvent(prevEvent => ({
+            ...prevEvent,
+            volunteers: prevEvent.volunteers.map(volunteer => 
+                volunteer.id === volunteerId ? { ...volunteer, attended: attended } : volunteer
+            )
+        }));
+    };
+
+    return (
+        <div>
+            <EventAttendance event={event} updateAttendance={updateAttendance} />
+        </div>
+    );
+}
+
+export default EventAttendancePage;

package.json

@@ -9,19 +9,20 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@types/bootstrap": "^5.2.10",
+    "next": "14.0.3",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.3"
+    "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.0.3",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.3"
+    "typescript": "^5"
   }
 }