Form implementation, api routes

src/components/participant/Participants.tsx

@@ -6,9 +6,8 @@ import { Button } from "~/components/ui/button";
 import { useStudyContext } from '../../context/StudyContext';
 import { Participant } from '../../types/Participant';
 import { CreateParticipantDialog } from './CreateParticipantDialog';
-import { Trash2 } from 'lucide-react';
 import { useToast } from '~/hooks/use-toast';
-import { UploadConsentForm } from './UploadConsentForm';
+import { ParticipantCard } from './ParticipantCard';
 
 export function Participants() {
   const [participants, setParticipants] = useState<Participant[]>([]);
@@ -89,24 +88,11 @@ export function Participants() {
       </CardHeader>
       <CardContent>
         {participants.length > 0 ? (
-          <ul className="space-y-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
             {participants.map(participant => (
-              <li key={participant.id} className="bg-gray-100 p-4 rounded">
-                <div className="flex justify-between items-center mb-2">
-                  <span className="font-semibold">{participant.name}</span>
-                  <Button 
-                    variant="ghost" 
-                    size="sm" 
-                    onClick={() => deleteParticipant(participant.id)}
-                    className="text-red-500 hover:text-red-700"
-                  >
-                    <Trash2 className="h-4 w-4" />
-                  </Button>
-                </div>
-                <UploadConsentForm studyId={selectedStudy.id} participantId={participant.id} />
-              </li>
+              <ParticipantCard key={participant.id} participant={participant} onDelete={deleteParticipant} />
             ))}
-          </ul>
+          </div>
         ) : (
           <p>No participants added yet.</p>
         )}