Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | 1x 5x 5x 5x 5x 1x 1x 5x 3x 2x 5x | "use client";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
export default function StatusBadge() {
const { theme } = useTheme();
const [iframeSrc, setIframeSrc] = useState("");
const [mounted, setMounted] = useState(false);
useEffect(() => {
setMounted(true);
setIframeSrc(`${process.env.NEXT_PUBLIC_STATUS_PAGE_URL}/badge?theme=light`);
}, []);
useEffect(() => {
if (!mounted || !theme) return; // Ensure hydration before updating iframe src
setIframeSrc(`${process.env.NEXT_PUBLIC_STATUS_PAGE_URL}/badge?theme=${theme === "dark" ? "dark" : "light"}`);
}, [theme, mounted]);
return (
<div
className={`transition-opacity duration-500 ease-in-out opacity-0 animate-fade-in
bg-opacity-10 rounded-lg p-1 flex md:inline-flex items-center justify-center
text-center w-full md:w-auto`}
style={{
background: mounted
? theme === "dark"
? "rgba(255,255,255,0.1)"
: "rgba(0,0,0,0.05)"
: "transparent", // Prevent hydration mismatch
borderRadius: "6px",
padding: "4px",
opacity: mounted ? 1 : 0,
transition: "opacity 0.5s ease-in-out",
}}
>
<div className="flex flex-col sm:flex-row items-center ml-20 md:ml-0">
{mounted && iframeSrc && (
<iframe
src={iframeSrc}
width="250"
height="30"
style={{ colorScheme: "normal" }}
title="Bitmutex Status Badge"
></iframe>
)}
</div>
</div>
);
}
|