blockchain/apps/portal/components/layout/top-bar.tsx

"use client";

import Link from "next/link";

import { IdentityConsumer } from "@/components/auth/identity-gate";
import { MenuIcon } from "@/components/icons/menu";
import { SearchIcon } from "@/components/icons/search";
import { WalletIcon } from "@/components/icons/wallet";
import { Button, buttonVariants } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { NETWORK_STATUS } from "@/lib/mock";
import { cn } from "@/lib/utils";

interface TopBarProps {
  onMenuClick: () => void;
}

export function TopBar({ onMenuClick }: TopBarProps) {
  return (
    <header className="sticky top-0 z-20 flex h-14 items-center gap-2 border-b border-border bg-background/80 px-3 pt-[env(safe-area-inset-top)] backdrop-blur sm:gap-3 sm:px-4 lg:px-6">
      <Button
        variant="ghost"
        size="icon"
        className="min-h-11 min-w-11 shrink-0 lg:hidden"
        onClick={onMenuClick}
        aria-label="Open navigation"
      >
        <MenuIcon size={18} />
      </Button>

      <div className="relative hidden min-w-0 max-w-md flex-1 md:block">
        <SearchIcon
          size={15}
          className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
        />
        <Input
          type="search"
          placeholder="Search blocks, transactions…"
          className="pl-9"
          aria-label="Search"
        />
      </div>

      <div className="ml-auto flex min-w-0 items-center gap-2 sm:gap-3">
        <span className="hidden items-center gap-2 rounded-full border border-border bg-card px-3 py-1 text-xs text-muted-foreground lg:inline-flex">
          <span className="relative flex h-2 w-2">
            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-confirmed opacity-60" />
            <span className="relative inline-flex h-2 w-2 rounded-full bg-confirmed" />
          </span>
          {NETWORK_STATUS.label}
        </span>

        <IdentityConsumer>
          {(identity) =>
            identity.isSignedIn ? (
              <Link
                href="/portal/dashboard"
                className={cn(
                  buttonVariants({ variant: "outline", size: "sm" }),
                  "min-h-10 max-w-[9rem] truncate sm:max-w-[12rem]",
                )}
                title={identity.label ?? "Account"}
              >
                {identity.label ?? "Account"}
              </Link>
            ) : (
              <>
                <Link
                  href="/portal/sign-in"
                  className={cn(
                    buttonVariants({ variant: "outline", size: "sm" }),
                    "min-h-10",
                  )}
                >
                  Sign in
                </Link>
                <Link
                  href="/portal/sign-in"
                  className={cn(
                    buttonVariants({ size: "sm" }),
                    "min-h-10 gap-2",
                  )}
                >
                  <WalletIcon size={15} />
                  <span className="hidden xs:inline sm:inline">Wallet</span>
                </Link>
              </>
            )
          }
        </IdentityConsumer>
      </div>
    </header>
  );
}