1
import { Link } from "@tanstack/react-router";
2
import { Pilcrow, Eye, Menu } from "lucide-react";
3
import { useReadyShareView } from "@/client/components/share/use-share-view";
4
import { Button } from "@/client/components/ui/button";
5
import { deriveSharePageAffordance } from "@/client/lib/affordance/share-page";
6
import { useOnline } from "@/client/hooks/use-online";
7
import { useScrollVisibility } from "@/client/hooks/use-scroll-visibility";
8
 
9
interface ShareHeaderProps {
10
  onToggleMobileSidebar: () => void;
11
}
12
 
13
export function ShareHeader({ onToggleMobileSidebar }: ShareHeaderProps) {
14
  const share = useReadyShareView();
15
  const online = useOnline();
16
  const visible = useScrollVisibility("main-content");
17
  const pageAffordance = deriveSharePageAffordance({
18
    pageKind: share.rootPage.kind,
19
    pageAccess: share.rootPage.permission,
20
    workspaceId: share.workspaceId,
21
    online,
22
  });
23
 
24
  return (
25
    <header
26
      className={`relative z-50 shrink-0 border-b border-zinc-800/60 bg-zinc-900/95 backdrop-blur-sm transition-[margin-top] duration-300 ease-out ${
27
        visible ? "mt-0" : "-mt-[61px]"
28
      }`}
29
    >
30
      <div className="flex items-center px-4 py-3 sm:px-6">
31
        <Button
32
          variant="ghost"
33
          size="sm"
34
          iconOnly
35
          onClick={onToggleMobileSidebar}
36
          aria-label="Toggle outline"
37
          icon={<Menu className="h-5 w-5" />}
38
          className="mr-2 md:hidden"
39
        />
40
        <Link to="/" className="group flex items-center gap-3 transition-opacity hover:opacity-80">
41
          <span className="inline-grid h-9 w-9 place-items-center">
42
            <Pilcrow
43
              className="h-6 w-6 text-accent-400 transition-transform duration-200 group-hover:-rotate-6"
44
              strokeWidth={2}
45
              aria-hidden="true"
46
            />
47
          </span>
48
          <span className="hidden sm:block">
49
            <strong className="block text-sm font-semibold text-zinc-100">bland</strong>
50
            <small className="block text-xs text-zinc-400">Docs on Cloudflare</small>
51
          </span>
52
        </Link>
53
54
        <div className="flex-1" />
55
56
        {pageAffordance.showViewOnlyBadge && (
57
          <span
58
            className="flex items-center gap-1 rounded-full bg-zinc-800 px-2 py-0.5 text-xs text-zinc-400"
59
            title="Read-only. Ask the owner for edit access."
60
          >
61
            <Eye className="h-3 w-3" />
62
            View only
63
          </span>
64
        )}
65
      </div>
66
    </header>
67
  );
68
}