new(component): StatusPage

components/StatusPage/StatusPage.mdx

@@ -0,0 +1,86 @@
+---
+title: "StatusPage"
+description: "A widget that displays the operational status of a service."
+author: "@trishaprile"
+version: "1.0.0"
+---
+
+import { useEffect, useState } from 'react';
+
+export const StatusPage = ({ title, url}) => {
+  const [status, setStatus] = useState(null);
+  const [indicator, setIndicator] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    let isMounted = true;
+
+    if (url) {
+      const fetchStatus = async () => {
+        try {
+          const res = await fetch(`${url.replace(/\/$/, '')}/api/v2/status.json`);
+          if (!res.ok) throw new Error(`Failed to fetch status: ${res.status}`);
+          const data = await res.json();
+          if (!isMounted) return;
+
+          setStatus(data.status.description);
+          setIndicator(data.status.indicator);
+        } catch (err) {
+          if (!isMounted) return;
+
+          setError('Unable to fetch status');
+        }
+      };
+      fetchStatus();
+    }
+
+    return () => {
+      isMounted = false;
+    };
+  }, [url]);
+
+ 	return (
+    <div className="relative max-w-sm p-5 rounded-lg shadow-sm border border-gray-200 dark:border-gray-400">
+			<a
+        href={url}
+        target="_blank"
+        rel="noopener noreferrer"
+        className="absolute top-3 right-3 text-gray-400 hover:text-gray-600"
+        aria-label="View full status page"
+      >
+				<i className="fa fa-arrow-up-right-from-square" />
+      </a>
+      <h3 className="mt-0! mb-2 text-gray-600! dark:text-white!">{title}</h3>
+      {error ? (
+        <div className="flex items-center space-x-2 text-red-600">
+          <span className="w-3 h-3 rounded-full bg-red-500" />
+          <span>{error}</span>
+        </div>
+      ) : !status ? (
+        <div className="flex items-center space-x-2">
+          <span className="w-3 h-3 rounded-full bg-gray-400 animate-pulse" />
+          <span>Loading status…</span>
+        </div>
+      ) : (
+        <div className="flex items-center space-x-2">
+          <span
+            className={`fa-duotone fa-solid ${
+              indicator === 'none'
+                ? 'fa-circle-check text-green-500'
+                : indicator === 'minor'
+                ? 'fa-circle-exclamation text-yellow-500'
+                : indicator === 'major'
+                ? 'fa-circle-exclamation text-orange-500'
+                : indicator === 'critical'
+                ? 'fa-circle-x text-red-500'
+                : 'fa-circle text-gray-500'
+            }`}
+          />
+          <span className="text-sm font-medium">{status}</span>
+        </div>
+      )}
+    </div>
+  );
+};
+
+<StatusPage title="ReadMe Status" url="https://www.readmestatus.com" />

components/StatusPage/readme.md

@@ -0,0 +1,20 @@
+# StatusPage
+
+## Overview
+
+A `<StatusPage />` can be used to embed the current operational status, health, or uptime of a service or system. It fetches live status information from a public [Statuspage](https://www.atlassian.com/software/statuspage) endpoint (e.g. https://www.githubstatus.com) and displays the status indicator and description.
+
+<img src="status-page.png" width="800" />
+
+## Usage
+
+```mdx
+<StatusPage title="ReadMe Status" url="https://www.readmestatus.com" />
+```
+
+## Props
+
+| Prop    | Type   | Description                       |
+| ------- | ------ | --------------------------------- |
+| `title` | string | The heading displayed at the top. |
+| `url`   | string | The URL of the status page.       |