feat: add ParticipantListEntry component and integrate draft into event form

src/components/buttons/event-form.tsx

@@ -9,6 +9,7 @@ import {
   useGetApiUserMe,
   usePostApiEvent,
 } from '@/generated/api/default/default';
+import ParticipantListEntry from '@/components/custom-ui/participantListEntry';
 
 type eventFormProps = {
   type?: 'create' | 'edit';
@@ -22,6 +23,10 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
   const [startTime, setStartTime] = React.useState<string>('12:00');
   const [endDate, setEndDate] = React.useState<Date | undefined>();
   const [endTime, setEndTime] = React.useState<string>('13:00');
+  const [selectedParticipants, setSelectedParticipants] = React.useState<{ [name: string]: boolean }>({
+    'Max Muster': false,
+    // Add more participants as needed
+  });
 
   async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
@@ -161,8 +166,17 @@ export default function EventForm({ type = 'edit' }: eventFormProps) {
             </div>
           </div>
           <div className='h-full w-full'>
-            <Label>Participants here</Label>{' '}
+            <Label>Participants</Label> {/* TODO: add participants input */}
-            {/* TODO: add participants input */}
+            <ParticipantListEntry
+              participant="Max Muster"
+              checked={selectedParticipants['Max Muster']}
+              onCheck={checked =>
+                setSelectedParticipants(prev => ({
+                  ...prev,
+                  ['Max Muster']: checked,
+                }))
+              }
+            ></ParticipantListEntry>
           </div>
         </div>
 

src/components/custom-ui/participantListEntry.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+type ParticipantListEntryProps = {
+  participant: string;
+  checked?: boolean;
+  onCheck?: (checked: boolean) => void;
+};
+
+export default function ParticipantListEntry({
+  participant,
+  checked = false,
+  onCheck,
+}: ParticipantListEntryProps) {
+  return (
+    <div className='flex items-center gap-2 py-1 ml-5'>
+      <input
+        type='checkbox'
+        checked={checked}
+        onChange={(e) => onCheck?.(e.target.checked)}
+        className='accent-primary cursor-pointer'
+      />
+      <span>{participant}</span>
+    </div>
+  );
+}