Add minecraft server status indicator

public/locales/en/common.json

@@ -262,9 +262,12 @@
         "queued": "Queued",
         "series": "Series"
     },
-    "minecraft":{
+    "minecraft": {
         "players": "Players",
-        "version": "Version"
+        "version": "Version",
+        "status": "Status",
+        "up": "Online",
+        "down": "Offline"
     },
     "miniflux": {
         "read": "Read",

src/widgets/minecraft/component.jsx

@@ -1,26 +1,46 @@
+import { useTranslation } from "next-i18next";
+
 import Container from "components/services/widget/container";
 import Block from "components/services/widget/block";
 import useWidgetAPI from "utils/proxy/use-widget-api";
 
 export default function Component({ service }) {
-    const { widget } = service;
-    const { data: serverData, error: serverError } = useWidgetAPI(widget, "status");
-    if(serverError){
-        return <Container error={serverError} />;
-    }
-    if (!serverData) {
-        return (
-          <Container service={service}>
-            <Block label="minecraft.players" />
-            <Block label="minecraft.version" />
-          </Container>
-        );
-      }
+  const { widget } = service;
+  const { data: serverData, error: serverError } = useWidgetAPI(widget, "status");
+  const { t } = useTranslation();
+  
+  if(serverError){
+    return <Container error={serverError} />;
+  }
+  if (!serverData) {
+    return (
+      <Container service={service}>
+      <Block label="minecraft.status"/>
+      <Block label="minecraft.players" />
+      <Block label="minecraft.version" />
+      </Container>
+    );
+  }
     
-      return (
-        <Container service={service}>
-          <Block label="minecraft.players" value={`${serverData.players.online} / ${serverData.players.max}`} />
-          <Block label="minecraft.version" value={serverData.version} />
-        </Container>
-      );
+  const statusIndicator = serverData.online ? 
+  <span className="text-green-500">{t("minecraft.up")}</span>:
+  <span className="text-red-500">{t("minecraft.down")}</span>;
+  
+  if(serverData.players){
+    return (
+      <Container service={service}>
+        <Block label="minecraft.status" value={statusIndicator} />
+        <Block label="minecraft.players" value={`${serverData.players.online} / ${serverData.players.max}`} />
+        <Block label="minecraft.version" value={serverData.version} />
+      </Container>
+    );
+  } 
+  return (
+      <Container service={service}>
+      <Block label="minecraft.status" value={statusIndicator} />
+      <Block label="minecraft.players" value="-" />
+      <Block label="minecraft.version" value="-" />
+      </Container>
+  );
 }
+     

src/widgets/minecraft/widget.js

@@ -11,7 +11,8 @@ const widget = {
         const jsonData = asJson(data);
         return {
           players: jsonData.players,
-          version: jsonData.version
+          version: jsonData.version,
+          online: jsonData.online
         }
       }
     }