From 9a97a2bf94542b4129997bad4d6b14fe45e0dce2 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Wed, 4 Oct 2023 20:52:38 +0200
Subject: [PATCH] fix: widget (#357)

---
 apps/docs/pages/api-server/status-widget.mdx  | 25 ++++++++++++-------
 .../components/layout/marketing-footer.tsx    | 10 ++------
 apps/web/src/components/status-widget.tsx     | 24 ++++++++++++------
 3 files changed, 34 insertions(+), 25 deletions(-)

diff --git a/apps/docs/pages/api-server/status-widget.mdx b/apps/docs/pages/api-server/status-widget.mdx
index 08f4ccc9..d4b0d84e 100644
--- a/apps/docs/pages/api-server/status-widget.mdx
+++ b/apps/docs/pages/api-server/status-widget.mdx
@@ -72,7 +72,7 @@ const statusEnum = z.enum([
   "degraded_performance",
   "partial_outage",
   "major_outage",
-  "under_maintenance", // currently not in use
+  "under_maintenance",
   "unknown",
 ]);
 
@@ -112,15 +112,13 @@ export async function StatusWidget({ slug }: { slug: string }) {
   const data = await res.json();
   const parsed = statusSchema.safeParse(data);
 
-  let label = "Unknown";
-  let color = "bg-gray-500";
-
-  if (parsed.success) {
-    const status = dictionary[parsed.data.status];
-    label = status.label;
-    color = status.color;
+  if (!parsed.success) {
+    return null;
   }
 
+  const key = parsed.data.status;
+  const { label, color } = dictionary[key];
+
   return (
     <a
       className="border-border text-foreground/70 hover:bg-muted hover:text-foreground inline-flex max-w-fit items-center gap-2 rounded-md border px-3 py-1 text-sm"
@@ -129,7 +127,16 @@ export async function StatusWidget({ slug }: { slug: string }) {
       rel="noreferrer"
     >
       {label}
-      <span className={`inline-block h-2 w-2 rounded-full ${color}`} />
+      <span className="relative flex h-2 w-2">
+        {parsed.data.status === "operational" ? (
+          <span
+            className={`absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`}
+          />
+        ) : null}
+        <span
+          className={`relative inline-flex h-2 w-2 rounded-full ${color}`}
+        />
+      </span>
     </a>
   );
 }
diff --git a/apps/web/src/components/layout/marketing-footer.tsx b/apps/web/src/components/layout/marketing-footer.tsx
index 57173c42..8bc6f368 100644
--- a/apps/web/src/components/layout/marketing-footer.tsx
+++ b/apps/web/src/components/layout/marketing-footer.tsx
@@ -14,13 +14,8 @@ export function MarketingFooter({ className }: Props) {
     <footer className={cn("w-full", className)}>
       <Shell className="grid gap-6">
         <div className="grid grid-cols-2 gap-6 md:grid-cols-4">
-          <div className="flex flex-col gap-3 text-sm">
-            <p className="text-foreground font-semibold">People</p>
-            <FooterLink
-              href="https://twitter.com/thibaultleouay"
-              label="@thibaultleouay"
-            />
-            <FooterLink href="https://twitter.com/mxkaske" label="@mxkaske" />
+          <div>
+            <StatusWidget slug="status" />
           </div>
           <div className="flex flex-col gap-3 text-sm">
             <p className="text-foreground font-semibold">Community</p>
@@ -41,7 +36,6 @@ export function MarketingFooter({ className }: Props) {
             <FooterLink href="/legal/privacy" label="Privacy" />
           </div>
         </div>
-        <StatusWidget slug="status" />
       </Shell>
     </footer>
   );
diff --git a/apps/web/src/components/status-widget.tsx b/apps/web/src/components/status-widget.tsx
index 255ac836..6d5d0a03 100644
--- a/apps/web/src/components/status-widget.tsx
+++ b/apps/web/src/components/status-widget.tsx
@@ -5,6 +5,7 @@ const statusEnum = z.enum([
   "degraded_performance",
   "partial_outage",
   "major_outage",
+  "under_maintenance",
   "unknown",
 ]);
 
@@ -44,15 +45,13 @@ export async function StatusWidget({ slug }: { slug: string }) {
   const data = await res.json();
   const parsed = statusSchema.safeParse(data);
 
-  let label = "Unknown";
-  let color = "bg-gray-500";
-
-  if (parsed.success) {
-    const status = dictionary[parsed.data.status];
-    label = status.label;
-    color = status.color;
+  if (!parsed.success) {
+    return null;
   }
 
+  const key = parsed.data.status;
+  const { label, color } = dictionary[key];
+
   return (
     <a
       className="border-border text-foreground/70 hover:bg-muted hover:text-foreground inline-flex max-w-fit items-center gap-2 rounded-md border px-3 py-1 text-sm"
@@ -61,7 +60,16 @@ export async function StatusWidget({ slug }: { slug: string }) {
       rel="noreferrer"
     >
       {label}
-      <span className={`inline-block h-2 w-2 rounded-full ${color}`} />
+      <span className="relative flex h-2 w-2">
+        {parsed.data.status === "operational" ? (
+          <span
+            className={`absolute inline-flex h-full w-full animate-ping rounded-full ${color} opacity-75 duration-1000`}
+          />
+        ) : null}
+        <span
+          className={`relative inline-flex h-2 w-2 rounded-full ${color}`}
+        />
+      </span>
     </a>
   );
 }
-- 
2.51.2