1 files changed, 44 insertions, 0 deletions
diff --git a/makima/frontend/src/components/Masthead.tsx b/makima/frontend/src/components/Masthead.tsx
new file mode 100644
index 0000000..a89977f
--- /dev/null
+++ b/makima/frontend/src/components/Masthead.tsx
@@ -0,0 +1,44 @@
+import { Link } from "react-router";
+import { LogoMark } from "./Logo";
+import { NavStrip } from "./NavStrip";
+
+interface MastheadProps {
+  showTicker?: boolean;
+  showNav?: boolean;
+}
+
+export function Masthead({ showTicker = false, showNav = true }: MastheadProps) {
+  return (
+    <header className="border-b-4 border-double border-[#050d1f] bg-[#08162e]">
+      <div className="flex items-center gap-3 px-4 py-3">
+        <Link to="/" className="flex items-center gap-3 no-underline">
+          <LogoMark size={32} />
+          <div>
+            <h1 className="m-0 text-xl text-white tracking-widest font-normal">
+              makima.jp
+            </h1>
+            <small className="block text-[#dbe7ff] text-xs tracking-wide">
+              Real-time Speech Recognition
+            </small>
+          </div>
+        </Link>
+      </div>
+
+      {showTicker && (
+        <div className="relative overflow-hidden border border-[#153667] bg-[#0a2242] text-[#b9d4ff] font-mono text-xs px-2.5 py-2 mx-4 mb-3">
+          <div className="absolute inset-y-0 left-0 w-3 bg-gradient-to-b from-[rgba(231,237,247,0.5)] to-transparent" />
+          <div className="absolute inset-y-0 right-0 w-3 bg-gradient-to-b from-[rgba(231,237,247,0.5)] to-transparent rotate-180" />
+          <span className="ticker-content">
+            /// MAKIMA INFORMATION SERVICE // REAL-TIME STT PLATFORM ///
+            TRANSPORT: WEBSOCKET /// ENCODING: PCM32F /// STATUS: ONLINE ///
+            MAKIMA.JP /// MAKIMA INFORMATION SERVICE // REAL-TIME STT PLATFORM
+            /// TRANSPORT: WEBSOCKET /// ENCODING: PCM32F /// STATUS: ONLINE ///
+            MAKIMA.JP ///
+          </span>
+        </div>
+      )}
+
+      {showNav && <NavStrip />}
+    </header>
+  );
+}