Create VibePod TTS podcast generator application

Agent-Logs-Url: https://github.com/JezzWTF/vibepod/sessions/a78fcf03-e979-4777-a428-18cc8eccc095 Co-authored-by: LyAhn <27559362+LyAhn@users.noreply.github.com>
2026-06-13 03:58:07 +00:00 · 2026-04-27 15:41:46 +00:00
parent ee85bece74
commit 3974a4cf69
26 changed files with 3083 additions and 0 deletions
@@ -0,0 +1,106 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type ServerStatus = "checking" | "online" | "offline";
+
+export default function Header() {
+  const [status, setStatus] = useState<ServerStatus>("checking");
+
+  useEffect(() => {
+    const checkHealth = async () => {
+      try {
+        const res = await fetch("/api/health");
+        const data = await res.json();
+        setStatus(data.status === "online" ? "online" : "offline");
+      } catch {
+        setStatus("offline");
+      }
+    };
+
+    checkHealth();
+    const interval = setInterval(checkHealth, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const statusConfig = {
+    checking: {
+      color: "bg-yellow-500",
+      label: "Checking...",
+      textColor: "text-yellow-400",
+      pulse: true,
+    },
+    online: {
+      color: "bg-green-500",
+      label: "Server Online",
+      textColor: "text-green-400",
+      pulse: false,
+    },
+    offline: {
+      color: "bg-red-500",
+      label: "Server Offline",
+      textColor: "text-red-400",
+      pulse: false,
+    },
+  };
+
+  const cfg = statusConfig[status];
+
+  return (
+    <header
+      className="border-b px-6 py-4 flex items-center justify-between"
+      style={{
+        background: "var(--card-bg)",
+        borderColor: "var(--border)",
+      }}
+    >
+      <div className="flex items-center gap-4">
+        <div className="flex items-center gap-3">
+          <div
+            className="w-9 h-9 rounded-xl flex items-center justify-center text-lg font-bold"
+            style={{
+              background:
+                "linear-gradient(135deg, var(--accent-teal-dim), var(--accent-violet-dim))",
+            }}
+          >
+            🎙
+          </div>
+          <div>
+            <h1
+              className="text-xl font-bold tracking-tight"
+              style={{
+                background:
+                  "linear-gradient(135deg, var(--accent-teal), var(--accent-violet))",
+                WebkitBackgroundClip: "text",
+                WebkitTextFillColor: "transparent",
+              }}
+            >
+              VibePod
+            </h1>
+            <p className="text-xs" style={{ color: "var(--muted)" }}>
+              Powered by VibeVoice 0.5B
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <div
+        className="flex items-center gap-2 px-3 py-1.5 rounded-full text-xs font-medium border"
+        style={{
+          background: "var(--background)",
+          borderColor: "var(--border)",
+        }}
+      >
+        <span className="relative flex h-2 w-2">
+          <span
+            className={`${cfg.pulse ? "animate-ping absolute inline-flex h-full w-full rounded-full opacity-75 " + cfg.color : "hidden"}`}
+          />
+          <span
+            className={`relative inline-flex rounded-full h-2 w-2 ${cfg.color}`}
+          />
+        </span>
+        <span style={{ color: "var(--foreground)" }}>{cfg.label}</span>
+      </div>
+    </header>
+  );
+}