Alter Maintenance-Screen hinzugefügt

packages/shared-components/components/Maintenance.tsx

@@ -0,0 +1,46 @@
+"use client";
+import { useEffect, useState } from "react";
+
+export const Maintenance = ({ message }: { message?: string }) => {
+	const [rotationSpeed, setRotationSpeed] = useState(0);
+	const [rotationDeg, setRotationDeg] = useState(0);
+
+	useEffect(() => {
+		const interval = setInterval(() => {
+			setRotationDeg(rotationDeg + rotationSpeed);
+		});
+
+		return () => {
+			clearInterval(interval);
+		};
+	}, [rotationDeg, rotationSpeed]);
+
+	return (
+		<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-[10px] min-h-0 bg-base-300 shadow-lg p-8">
+			<h1 className="text-4xl font-bold text-center">Wartungsarbeiten</h1>
+			<p className="text-base text-center mx-6">
+				{message || "Unsere Website wird derzeit gewartet. Bitte versuchen Sie es später erneut."}
+			</p>
+			<div className="flex flex-col items-center gap-6 mt-6">
+				<img
+					src={`${process.env.NEXT_PUBLIC_HUB_URL}/logo.png`}
+					width={150}
+					alt="logo"
+					style={{
+						transform: `rotate(${rotationDeg}deg)`,
+						cursor: "pointer",
+						boxShadow: `0 0 ${rotationSpeed * 20}px rgba(255, 0, 0, ${rotationSpeed - 0})`,
+						borderRadius: "50%",
+					}}
+					onClick={() => {
+						setRotationSpeed(rotationSpeed + 0.1);
+					}}
+					onContextMenu={(e) => {
+						e.preventDefault();
+						setRotationSpeed(Math.max(rotationSpeed - 0.1, 0));
+					}}
+				/>
+			</div>
+		</div>
+	);
+};

packages/shared-components/components/index.ts

@@ -1,2 +1,3 @@
 export * from "./Badge";
 export * from "./PenaltyDropdown";
+export * from "./Maintenance";