style: Alarm Ui Widget

components/uiWidgets/AlarmIndicator.js

@@ -1,15 +1,36 @@
 import React from "react";
 import AlarmIcon from "@/components/icons/material-symbols/AlarmIcon";
 import Tooltip from "@mui/material/Tooltip";
+import styles from "./AlarmIndicator.module.css";
 
 /**
  * AlarmIndicator zeigt ein Alarm-Icon, das bei Klick den AlarmLink in neuem Tab öffnet.
  * @param {boolean} hasAlarm - Ob ein Alarm aktiv ist
  * @param {string} alarmLink - Link zur Alarm-Detailseite
  * @param {string} [alarmText] - Optionaler Tooltip-Text
+ * @param {string} [animation] - "shake" | "rotate" | "blink" | "pulse" (default: "shake")
+ * @param {number} [pulseDuration] - Animationsdauer in Sekunden (default: 0.5)
  */
-const AlarmIndicator = ({ hasAlarm, alarmLink, alarmText }) => {
+const AlarmIndicator = ({
+  hasAlarm,
+  alarmLink,
+  alarmText,
+  animation = "pulse",
+  pulseDuration = 0.5,
+}) => {
   if (!hasAlarm || !alarmLink) return null;
+  // Animation-Klasse wählen
+  let animationClass = styles.fastPulse;
+  let style = { animationDuration: `${pulseDuration}s` };
+  if (animation === "shake") {
+    animationClass = styles.shakeAlarm;
+  } else if (animation === "rotate") {
+    animationClass = styles.rotateAlarm;
+  } else if (animation === "blink") {
+    animationClass = styles.blinkAlarm;
+  } else if (animation === "pulse") {
+    animationClass = styles.fastPulse;
+  }
   return (
     <Tooltip title={alarmText || "Alarm aktiv"}>
       <span
@@ -20,7 +41,10 @@ const AlarmIndicator = ({ hasAlarm, alarmLink, alarmText }) => {
         }}
         aria-label="Alarm aktiv"
       >
-        <AlarmIcon className="h-8 w-8 animate-pulse text-red-500" />
+        <AlarmIcon
+          className={`h-14 w-14 ${animationClass} text-red-800 bg-orange-500`}
+          style={style}
+        />
       </span>
     </Tooltip>
   );