makima/frontend/src/components/Masthead.tsx


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

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" style={{ fontFamily: 'var(--font-logo)' }}>
              makima.jp
            </h1>
            <small className="block text-[#dbe7ff] text-xs tracking-wide">
              Listening System
            </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 LISTENING SYSTEM // MESH LATTICE FOR CONTESTED DOMAINS ///
            TRANSPORT: WEBSOCKET /// ENCODING: PCM32F /// STATUS: ONLINE ///
            MAKIMA.JP /// MAKIMA LISTENING SYSTEM // MESH LATTICE FOR CONTESTED DOMAINS
            /// TRANSPORT: WEBSOCKET /// ENCODING: PCM32F /// STATUS: ONLINE ///
            MAKIMA.JP ///
          </span>
        </div>
      )}

      {showNav && <NavStrip />}
    </header>
  );
}