Ban Message Design

apps/hub/app/(app)/_components/Penalty.tsx

@@ -1,6 +1,7 @@
 import { prisma } from "@repo/db";
 import { TriangleAlert } from "lucide-react";
 import { getServerSession } from "next-auth";
+import { PenaltyCountdown } from "./PenaltyCountdown";
 
 export const Penalty = async () => {
 	const session = await getServerSession();
@@ -10,7 +11,7 @@ export const Penalty = async () => {
 			until: {
 				gte: new Date(),
 			},
-			type: "TIME_BAN",
+			type: { in: ["TIME_BAN", "BAN"] },
 		},
 	});
 	if (!openPenaltys[0]) {
@@ -18,18 +19,33 @@ export const Penalty = async () => {
 	}
 
 	return (
-		<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
-			<div className="card-body">
-				<h2 className="card-title text-3xl text-center text-error">
-					<TriangleAlert />
-					Aktive Strafe
-				</h2>
-				<p>Du hast eine aktive Strafe, die dich daran hindert, an Flügen teilzunehmen.</p>
-				<p>Strafe: {openPenaltys[0].reason}</p>
-				{openPenaltys[0].until && (
-					<p>Bis: {new Date(openPenaltys[0].until).toLocaleDateString()}</p>
-				)}
-			</div>
+		<div className="card bg-error shadow-xl mb-4 col-span-6 xl:col-span-3">
+			{openPenaltys[0].type === "TIME_BAN" && (
+				<div className="card-body text-base-300">
+					<h2 className="card-title text-3xl">
+						<TriangleAlert />
+						Aktive Strafe - <PenaltyCountdown until={openPenaltys[0].until ?? new Date()} />{" "}
+						verbleibend
+					</h2>
+					<p className="text-left font-bold">
+						Du hast eine aktive Strafe und kannst dich deshalb nicht mit dem Netzwerk verbinden.
+					</p>
+					<p className="text-left font-bold">Grund: {openPenaltys[0].reason}</p>
+				</div>
+			)}
+			{openPenaltys[0].type === "BAN" && (
+				<div className="card-body text-base-300">
+					<h2 className="card-title text-3xl">
+						<TriangleAlert />
+						Du wurdest permanent von VirtualAirRescue ausgeschlossen.
+					</h2>
+					<p className="text-left font-bold">
+						Dein Fehlverhalten war so schwerwiegend, dass du dauerhaft von VirtualAirRescue
+						ausgeschlossen wurdest. Du kannst dich nicht mehr mit dem Netzwerk verbinden.
+					</p>
+					<p className="text-left font-bold">Grund: {openPenaltys[0].reason}</p>
+				</div>
+			)}
 		</div>
 	);
 };