misc

src/components/RandomMsg.jsx

@@ -3,18 +3,24 @@ import { API_URL } from "../config";
 
 export default function RandomMsg() {
   const [randomMsg, setRandomMsg] = useState("");
+  const [responseTime, setResponseTime] = useState(null);
+  const [showResponseTime, setShowResponseTime] = useState(false);
 
   const getRandomMsg = async () => {
     try {
+      const start = performance.now();
       const response = await fetch(`${API_URL}/randmsg`, {
         method: "POST",
         headers: { "Content-Type": "application/json; charset=utf-8" },
       });
+      const end = performance.now();
+      setResponseTime(Math.round(end - start));
       if (!response.ok) throw new Error(`HTTP ${response.status}`);
       const data = await response.json();
-      if (data?.msg) setRandomMsg(data.msg.replace(/<br\s*\/?>/gi, "\n"));
+      if (data?.msg) setRandomMsg(data.msg.replace(/<br\s*\/?\>/gi, "\n"));
     } catch (err) {
       console.error("Failed to fetch random message:", err);
+      setResponseTime(null);
     }
   };
 
@@ -22,11 +28,43 @@ export default function RandomMsg() {
 
   return (
     <div className="random-msg-container">
-      <div className="random-msg">
+      <div className="random-msg" style={{ position: "relative", display: "inline-block" }}>
         {randomMsg && (
-          <small>
-            <i>{randomMsg}</i>
-          </small>
+          <>
+            <small
+              style={{ cursor: responseTime !== null ? "pointer" : "default" }}
+              onClick={() => {
+                if (responseTime !== null) setShowResponseTime((v) => !v);
+              }}
+              tabIndex={0}
+              onBlur={() => setShowResponseTime(false)}
+            >
+              <i>{randomMsg}</i>
+            </small>
+            {showResponseTime && responseTime !== null && (
+              <div
+                style={{
+                  position: "absolute",
+                  left: "50%",
+                  top: "100%",
+                  transform: "translateX(-50%)",
+                  marginTop: 4,
+                  background: "#222",
+                  color: "#fff",
+                  fontSize: "0.75em",
+                  padding: "2px 8px",
+                  borderRadius: 6,
+                  boxShadow: "0 2px 8px rgba(0,0,0,0.15)",
+                  zIndex: 10,
+                  whiteSpace: "nowrap"
+                }}
+                role="status"
+                aria-live="polite"
+              >
+                API response: {responseTime} ms
+              </div>
+            )}
+          </>
         )}
       </div>
       {randomMsg && (