Function ViewModeToggle

packages/studio/src/components/StudioHeader.tsx:150–181

Segmented control switching the main stage between storyboard and preview.

()

/** Segmented control switching the main stage between storyboard and preview. */
function ViewModeToggle() {
  const { viewMode, setViewMode } = useViewMode();
  return (
    <div
      className="flex items-center gap-0.5 rounded-md bg-neutral-800 p-0.5"
      role="tablist"
      aria-label="Studio view"
    >
      {VIEW_MODE_OPTIONS.map(({ mode, label }) => {
        const active = viewMode === mode;
        return (
          <button
            key={mode}
            type="button"
            role="tab"
            aria-selected={active}
            onClick={() => {
              if (active) return;
              trackStudioEvent("view_mode_toggle", { mode });
              setViewMode(mode);
            }}
            className={`rounded px-3 py-1 text-[11px] font-medium transition-colors ${
              active ? "bg-neutral-200 text-neutral-900" : "text-neutral-400 hover:text-neutral-200"
            }`}
          >
            {label}
          </button>
        );
      })}
    </div>
  );
}

// fallow-ignore-next-line complexity
export function StudioHeader({