update footer

Ab3id · Mar 5, 2024 · 307fa1d · 307fa1d
1 parent e7500d4
commit 307fa1d
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@dub/ui",
   "description": "UI components for Dub.co",
-  "version": "0.0.56",
+  "version": "0.0.57",
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

diff --git a/packages/ui/src/footer.tsx b/packages/ui/src/footer.tsx
@@ -289,9 +289,23 @@ function StatusBadge() {
     <Link
       href="https://status.dub.co"
       target="_blank"
-      className="flex max-w-fit items-center space-x-2 rounded-md border border-gray-200 bg-white px-3 py-2 transition-colors hover:bg-gray-100"
+      className="group flex max-w-fit items-center space-x-2 rounded-md border border-gray-200 bg-white px-3 py-2 transition-colors hover:bg-gray-100"
     >
-      <div className={cn("h-3 w-3 rounded-full", color)} />
+      <div className="relative h-3 w-3">
+        <div
+          className={cn(
+            "absolute inset-0 m-auto h-3 w-3 animate-ping items-center justify-center rounded-full group-hover:animate-none",
+            color,
+            status === "Loading status..." && "animate-none",
+          )}
+        />
+        <div
+          className={cn(
+            "absolute inset-0 z-10 m-auto h-3 w-3 rounded-full",
+            color,
+          )}
+        />
+      </div>
       <p className="text-sm font-medium text-gray-800">{status}</p>
     </Link>
   );