79 lines
2.3 KiB
TypeScript
79 lines
2.3 KiB
TypeScript
"use client";
|
|
import { DrawingPinFilledIcon } from "@radix-ui/react-icons";
|
|
import { Event, Participant, 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,
|
|
}: {
|
|
user: User;
|
|
event: Event & {
|
|
Participants: Participant[];
|
|
};
|
|
}) => {
|
|
return (
|
|
<div className="col-span-full">
|
|
<div className="card bg-base-200 mb-4 shadow-xl">
|
|
<div className="card-body">
|
|
<h2 className="card-title">{event.name}</h2>
|
|
<div className="absolute right-0 top-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-balance text-left" data-color-mode="dark">
|
|
<MDEditor.Markdown
|
|
source={event.descriptionShort}
|
|
style={{
|
|
backgroundColor: "transparent",
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-2 flex justify-end">
|
|
{event.finishedBadges.map((b) => {
|
|
return <Badge badge={b} key={b} />;
|
|
})}
|
|
</div>
|
|
</div>
|
|
<div className="card-actions mt-5 flex items-center justify-between">
|
|
<div>
|
|
<p className="flex items-center gap-2 text-left text-gray-600">
|
|
<DrawingPinFilledIcon /> <b>Teilnahmevoraussetzungen: </b>
|
|
{!event.requiredBadges.length && "Keine"}
|
|
</p>
|
|
{!!event.requiredBadges.length && (
|
|
<div className="ml-6 flex">
|
|
<b className="mr-2 text-left text-gray-600">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
|
|
user={user}
|
|
event={event}
|
|
title={event.name}
|
|
participant={event.Participants[0]}
|
|
modalId={`${event.name}_modal.${event.id}`}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|