Add react-icons dependency and update UptimeStatusIsland component for responsive design

- Added react-icons package to the project for icon usage.
- Enhanced UptimeStatusIsland component to display responsive badges for certificate expiry, average ping, and uptime metrics, utilizing icons for mobile views.

package-lock.json

@@ -30,6 +30,7 @@
         "rate-limiter-flexible": "^5.0.5",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-icons": "^5.5.0",
         "unpic": "^3.22.0"
       },
       "devDependencies": {
@@ -9174,6 +9175,15 @@
         "react": "^19.0.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",
+      "integrity": "sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",

package.json

@@ -44,6 +44,7 @@
     "rate-limiter-flexible": "^5.0.5",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-icons": "^5.5.0",
     "unpic": "^3.22.0"
   },
   "devDependencies": {

src/components/UptimeStatusIsland.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react';
+import { FiAward, FiPercent, FiActivity } from 'react-icons/fi';
 
 function getStatusColor(validCert) {
   if (validCert === false) return 'bg-red-600';
@@ -90,26 +91,48 @@ export default function UptimeStatusIsland() {
                       {/* Cert Exp (center-left, col-span-1) */}
                       <div className="flex justify-center col-span-1">
                         {monitor.certExpiryDaysRemaining !== undefined && (
-                          <span className={`px-2 py-0 rounded-full text-xs font-medium text-white ${getCertBg(monitor.certExpiryDaysRemaining)}`}
+                          <>
-                            title={monitor.certExpiryDaysRemaining < 0 ? 'Certificate expired!' : `Certificate expires in ${monitor.certExpiryDaysRemaining} days`}>
+                            {/* Desktop: full badge */}
-                            {getCertText(monitor.certExpiryDaysRemaining)}
+                            <span className={`hidden sm:inline px-2 py-0 rounded-full text-xs font-medium text-white ${getCertBg(monitor.certExpiryDaysRemaining)}`}
-                          </span>
+                              title={monitor.certExpiryDaysRemaining < 0 ? 'Certificate expired!' : `Certificate expires in ${monitor.certExpiryDaysRemaining} days`}>
+                              {getCertText(monitor.certExpiryDaysRemaining)}
+                            </span>
+                            {/* Mobile: icon badge */}
+                            <span className={`sm:hidden px-2 py-0 rounded-full text-xs font-medium flex items-center justify-center ${getCertBg(monitor.certExpiryDaysRemaining)}`}
+                              title={monitor.certExpiryDaysRemaining < 0 ? 'Certificate expired!' : `Certificate expires in ${monitor.certExpiryDaysRemaining} days`}>
+                              <FiAward className="w-4 h-4" />
+                            </span>
+                          </>
                         )}
                       </div>
                       {/* Avg. (center-right, col-span-1) */}
                       <div className="flex justify-center col-span-1">
                         {monitor.avgPing !== undefined && (
-                          <span className={`px-2 py-0 rounded-full text-xs font-medium ${getAvgPingBg(monitor.avgPing)}`}>
+                          <>
-                            Avg.: {monitor.avgPing < 100 ? monitor.avgPing.toFixed(1) : Math.round(monitor.avgPing)} ms
+                            {/* Desktop: full badge */}
-                          </span>
+                            <span className={`hidden sm:inline px-2 py-0 rounded-full text-xs font-medium ${getAvgPingBg(monitor.avgPing)}`}>
+                              Avg.: {monitor.avgPing < 100 ? monitor.avgPing.toFixed(1) : Math.round(monitor.avgPing)} ms
+                            </span>
+                            {/* Mobile: icon badge */}
+                            <span className={`sm:hidden px-2 py-0 rounded-full text-xs font-medium flex items-center justify-center ${getAvgPingBg(monitor.avgPing)}`}>
+                              <FiActivity className="w-4 h-4" />
+                            </span>
+                          </>
                         )}
                       </div>
                       {/* 24h (right, col-span-1) */}
                       <div className="flex justify-end col-span-1">
                         {monitor.uptime24h !== undefined && (
-                          <span className={`px-2 py-0 rounded-full text-xs font-medium ${getUptime24hBg(monitor.uptime24h)}`}>
+                          <>
-                            24h: {monitor.uptime24h.toFixed(1)}%
+                            {/* Desktop: full badge */}
-                          </span>
+                            <span className={`hidden sm:inline px-2 py-0 rounded-full text-xs font-medium ${getUptime24hBg(monitor.uptime24h)}`}>
+                              24h: {monitor.uptime24h.toFixed(1)}%
+                            </span>
+                            {/* Mobile: icon badge */}
+                            <span className={`sm:hidden px-2 py-0 rounded-full text-xs font-medium flex items-center justify-center ${getUptime24hBg(monitor.uptime24h)}`}>
+                              <FiPercent className="w-4 h-4" />
+                            </span>
+                          </>
                         )}
                       </div>
                     </div>