module Link = struct
  let[@react.component] make ~children ~href ?(className = "") =
    let base_class = "hover:text-gray-300 transition-colors" in
    let clas = Printf.sprintf "%s %s" base_class className in
    <a className=clas href>children</a>
  ;;
end

let rs = React.string

let[@react.component] make () =
  <header className="bg-black text-white">
    <div className="flex items-center space-x-6 justify-between py-2 px-4">
      <Link href="/">
        <img className="w-[60px]" src="https://s3.spandrell.ch/assets/icons/tianming.svg"
        />
      </Link>
      <nav className="flex w-4 items-center space-x-6 text-sm font-medium">
        <Link href="/blog">(rs "BLOG")</Link>
        <Link href="/chat">(rs "CHAT")</Link>
        <Link href="/board">(rs "BOARD")</Link>
        <Link href="#">(rs "FEED")</Link>
        <Link href="/tv">(rs "TV")</Link>
        <Link href="#">(rs "WIKI")</Link>
        <Link href="#">(rs "BOOKS")</Link>
        <Link href="#">(rs "ABOUT")</Link>
      </nav>
      <div className="flex items-center space-x-6 text-sm font-medium">
        <Link href="/search"><span>(rs "SEARCH")</span></Link>
        <Link href="/login"><span>(rs "LOGIN")</span></Link>
      </div>
    </div>
  </header>
;;