zebflow 0.7.9

Reactive web automation platform — pipelines, templates, and real-time collaboration in a single binary.
Documentation 
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 "zeb";
import Button from "@/components/ui/button";

/**
 * Fixed top bar for authenticated platform pages outside the project studio.
 * Home uses the marketplace dialog directly on `/home`.
 *
 * Why “chrome”: in UI jargon, *chrome* is the framing around the content window
 * (nav, toolbars, system trim) — the same sense as in “browser chrome”, not “Google Chrome”.
 */
export default function ChromeHeader(props) {
  const trailing =
    props?.children != null ? (
      props.children
    ) : (
      <>
        <Button as={Link} href="/profile" size="sm" variant="outline" className="rounded-md">
          Profile
        </Button>
        <form method="post" action="/logout">
          <Button type="submit" size="sm" variant="primary" className="rounded-md">
            Logout
          </Button>
        </form>
      </>
    );

  return (
    <nav className="fixed top-0 z-50 w-full border-b border-gray-200 bg-white/95 py-3 shadow-sm backdrop-blur-sm">
      <div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-6">
        <Link
          href="/home"
          className="flex items-center gap-3 text-xl font-bold tracking-tight text-gray-900 hover:no-underline"
        >
          <img src="/assets/branding/logo.svg" alt="Zebflow logo" className="h-9 w-9 shrink-0" />
          <span>
            ZEBFLOW <span className="ml-2 text-sm text-gray-400">Platform</span>
          </span>
        </Link>
        <div className="flex shrink-0 flex-wrap items-center justify-end gap-2">{trailing}</div>
      </div>
    </nav>
  );
}