added basic data for event list, md editor and viewer

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

@@ -1,28 +1,15 @@
-"use client";
-import { DrawingPinFilledIcon, EnterIcon } from "@radix-ui/react-icons";
-import { User } from "@repo/db";
-import ModalBtn from "./modalBtn";
+'use client';
+import { DrawingPinFilledIcon, EnterIcon } from '@radix-ui/react-icons';
+import { Event, User } from '@repo/db';
+import ModalBtn from './modalBtn';
+import MDEditor from '@uiw/react-md-editor';
 
-export const KursItem = ({
-  user,
-  title,
-  type,
-  beschreibung,
-  badge,
-  moodleReq,
-}: {
-  user: User;
-  title: string;
-  type: string;
-  beschreibung: string;
-  badge: string;
-  moodleReq: boolean;
-}) => {
+export const KursItem = ({ user, event }: { user: User; event: Event }) => {
   return (
     <div className="col-span-full">
       <div className="card bg-base-200 shadow-xl mb-4">
         <div className="card-body">
-          <h2 className="card-title">{title}</h2>
+          <h2 className="card-title">{event.name}</h2>
           <div className="absolute top-0 right-0 m-4">
             <span className="badge badge-info badge-outline">
               Zusatzqualifikation
@@ -30,21 +17,48 @@ export const KursItem = ({
           </div>
           <div className="grid grid-cols-6 gap-4">
             <div className="col-span-4">
-              <p className="text-left text-balance">{beschreibung}</p>
+              <div className="text-left text-balance">
+                <MDEditor.Markdown
+                  source={event.description}
+                  className="whitespace-pre-wrap"
+                  style={{
+                    backgroundColor: 'transparent',
+                  }}
+                />
+              </div>
             </div>
-            <div className="col-span-2">{badge}</div>
+            <div className="col-span-2">{event.finishedBadges}</div>
           </div>
           <div className="card-actions flex justify-between items-center mt-5">
-            <p className="text-gray-600 text-left flex items-center gap-2">
-              <DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen:</b>
-              <a className="link link-info" href="">
-                Moodle Kurs /MOODLEKURSTITLE\
-              </a>
-            </p>
+            <div>
+              <p className="text-gray-600 text-left flex items-center gap-2">
+                <DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen: </b>
+                {(!event.starterMoodleCourseId ||
+                  !event.requiredBadges.length) &&
+                  'Keine'}
+                {event.starterMoodleCourseId && (
+                  <a className="link link-info" href="">
+                    Moodle Kurs {event.starterMoodleCourseId}
+                  </a>
+                )}
+              </p>
+              {!!event.requiredBadges.length && (
+                <div className="flex ml-6">
+                  <b className="text-gray-600 text-left">Abzeichen:</b>
+                  <div className="flex gap-2">
+                    {event.requiredBadges.map((badge) => (
+                      <div className="badge badge-secondary badge-outline">
+                        {badge}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </div>
             <ModalBtn
-              title={title}
-              dates={["Dienstag, 25 Februar 2025", "Mittwoch, 26 Februar 2025"]}
-              modalId={title + "_modal" + Math.random()}
+              title={event.name}
+              dates={['Dienstag, 25 Februar 2025', 'Mittwoch, 26 Februar 2025']}
+              modalId={`${event.name}_modal.${event.id}`}
             />
           </div>
         </div>

apps/hub/app/(app)/events/page.tsx

@@ -1,22 +1,16 @@
-import { getServerSession } from "../../api/auth/[...nextauth]/auth";
-import { PrismaClient } from "@repo/db";
-import { PilotKurs, KursItem } from "./_components/item";
-import {
-  RocketIcon,
-  DrawingPinFilledIcon,
-  EnterIcon,
-} from "@radix-ui/react-icons";
+import { getServerSession } from '../../api/auth/[...nextauth]/auth';
+import { PrismaClient } from '@repo/db';
+import { PilotKurs, KursItem } from './_components/item';
+import { RocketIcon } from '@radix-ui/react-icons';
 
 export default async () => {
   const prisma = new PrismaClient();
   const session = await getServerSession();
   if (!session) return null;
-  const user = await prisma.user.findFirst({
-    where: {
-      id: session.user.id,
-    },
-  });
+  const user = session.user;
+  const events = await prisma.event.findMany();
   if (!user) return null;
+
   return (
     <div className="grid grid-cols-6 gap-4">
       <div className="col-span-full">
@@ -25,21 +19,9 @@ export default async () => {
         </p>
       </div>
       <PilotKurs user={user} />
-      <KursItem
-        user={user}
-        title="Einsteigerkurs für Disponenten"
-        type="1"
-        beschreibung="In diesem Kurs lernen Teilnehmer die Aufgaben eines
-                  Disponenten in der Rettungsfliegerei kennen. Dazu gehören die
-                  Koordination von Notfalleinsätzen, die effiziente Planung von
-                  Ressourcen und die Kommunikation mit Piloten sowie
-                  Rettungsdiensten. Der Kurs vermittelt praxisnahe Kenntnisse
-                  für die schnelle und präzise Entscheidungsfindung unter
-                  Zeitdruck, um eine reibungslose Abwicklung von
-                  Rettungseinsätzen zu gewährleisten."
-        badge="Badge"
-        moodleReq={true}
-      />
+      {events.map((event) => (
+        <KursItem user={user} event={event} key={event.id} />
+      ))}
     </div>
   );
 };