added Badges to Dashboard, warning for full events

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

@@ -3,11 +3,13 @@ import { DrawingPinFilledIcon, EnterIcon } from "@radix-ui/react-icons";
 import { Event, Participant, EventAppointment, User } from "@repo/db";
 import ModalBtn from "./modalBtn";
 import MDEditor from "@uiw/react-md-editor";
+import { Badge } from "../../../_components/Badge/Badge";
 
 export const KursItem = ({
 	user,
 	event,
 	selectedAppointments,
+	appointments,
 }: {
 	user: User;
 	event: Event & {
@@ -15,6 +17,7 @@ export const KursItem = ({
 		participants: Participant[];
 	};
 	selectedAppointments: EventAppointment[];
+	appointments: EventAppointment[];
 }) => {
 	return (
 		<div className="col-span-full">
@@ -45,7 +48,11 @@ export const KursItem = ({
 								/>
 							</div>
 						</div>
-						<div className="col-span-2">{event.finishedBadges}</div>
+						<div className="col-span-2">
+							{event.finishedBadges.map((b) => {
+								return <Badge name={b} key={b} />;
+							})}
+						</div>
 					</div>
 					<div className="card-actions flex justify-between items-center mt-5">
 						<div>
@@ -55,10 +62,13 @@ export const KursItem = ({
 							</p>
 							{!!event.requiredBadges.length && (
 								<div className="flex ml-6">
-									<b className="text-gray-600 text-left">Abzeichen:</b>
+									<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">
+											<div
+												className="badge badge-secondary badge-outline"
+												key={badge}
+											>
 												{badge}
 											</div>
 										))}
@@ -71,7 +81,7 @@ export const KursItem = ({
 							user={user}
 							event={event}
 							title={event.name}
-							dates={event.appointments}
+							dates={appointments}
 							participant={event.participants[0]}
 							modalId={`${event.name}_modal.${event.id}`}
 						/>