Finalized Event modal

apps/hub/app/(app)/events/_components/EventCard.tsx

@@ -0,0 +1,86 @@
+"use client";
+import { DrawingPinFilledIcon } from "@radix-ui/react-icons";
+import { Event, Participant, EventAppointment, User } from "@repo/db";
+import ModalBtn from "./Modal";
+import MDEditor from "@uiw/react-md-editor";
+import { Badge } from "@repo/shared-components";
+
+export const EventCard = ({
+	user,
+	event,
+	selectedAppointments,
+	appointments,
+}: {
+	user: User;
+	event: Event & {
+		Appointments: EventAppointment[];
+		Participants: Participant[];
+	};
+	selectedAppointments: EventAppointment[];
+	appointments: EventAppointment[];
+}) => {
+	return (
+		<div className="col-span-full">
+			<div className="card bg-base-200 shadow-xl mb-4">
+				<div className="card-body">
+					<h2 className="card-title">{event.name}</h2>
+					<div className="absolute top-0 right-0 m-4">
+						{event.type === "COURSE" && (
+							<span className="badge badge-info badge-outline">Zusatzqualifikation</span>
+						)}
+						{event.type === "EVENT" && (
+							<span className="badge badge-secondary badge-outline">Event</span>
+						)}
+					</div>
+					<div className="grid grid-cols-6 gap-4">
+						<div className="col-span-4">
+							<div className="text-left text-balance">
+								<MDEditor.Markdown
+									source={event.description}
+									className="whitespace-pre-wrap"
+									style={{
+										backgroundColor: "transparent",
+									}}
+								/>
+							</div>
+						</div>
+						<div className="flex col-span-2 justify-end">
+							{event.finishedBadges.map((b) => {
+								return <Badge badge={b} key={b} />;
+							})}
+						</div>
+					</div>
+					<div className="card-actions flex justify-between items-center mt-5">
+						<div>
+							<p className="text-gray-600 text-left flex items-center gap-2">
+								<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen: </b>
+								{!event.requiredBadges.length && "Keine"}
+							</p>
+							{!!event.requiredBadges.length && (
+								<div className="flex ml-6">
+									<b className="text-gray-600 text-left mr-2">Abzeichen:</b>
+									<div className="flex gap-2">
+										{event.requiredBadges.map((badge) => (
+											<div className="badge badge-secondary badge-outline" key={badge}>
+												{badge}
+											</div>
+										))}
+									</div>
+								</div>
+							)}
+						</div>
+						<ModalBtn
+							selectedAppointments={selectedAppointments}
+							user={user}
+							event={event}
+							title={event.name}
+							dates={appointments}
+							participant={event.Participants[0]}
+							modalId={`${event.name}_modal.${event.id}`}
+						/>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+};