47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
"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>
|
|
);
|
|
};
|