modeling-app/src/routes/Onboarding/Camera.tsx

import { OnboardingButtons, useDismiss, useNextClick } from '.'
import { onboardingPaths } from 'routes/Onboarding/paths'
import { useStore } from '../../useStore'
import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
import {
  CameraSystem,
  cameraMouseDragGuards,
  cameraSystems,
} from 'lib/cameraControls'
import { SettingsSection } from 'components/Settings/SettingsSection'

export default function Units() {
  const { buttonDownInStream } = useStore((s) => ({
    buttonDownInStream: s.buttonDownInStream,
  }))
  const dismiss = useDismiss()
  const next = useNextClick(onboardingPaths.STREAMING)
  const {
    settings: {
      send,
      state: {
        context: {
          modeling: { mouseControls },
        },
      },
    },
  } = useSettingsAuthContext()

  return (
    <div className="fixed inset-0 z-50 grid items-end justify-start px-4 pointer-events-none">
      <div
        className={
          'max-w-2xl border border-chalkboard-50 dark:border-chalkboard-80 shadow-lg flex flex-col justify-center bg-chalkboard-10 dark:bg-chalkboard-90 p-8 rounded' +
          (buttonDownInStream ? '' : ' pointer-events-auto')
        }
      >
        <SettingsSection
          title="Mouse Controls"
          description="Choose what buttons you want to use on your mouse or trackpad to move around the 3D view. Try them out above and choose the one that feels most comfortable to you."
          className="my-4 last-of-type:mb-12"
          headingClassName="text-3xl font-bold"
        >
          <select
            id="camera-controls"
            className="block w-full px-3 py-1 bg-transparent border border-chalkboard-30"
            value={mouseControls.current}
            onChange={(e) => {
              send({
                type: 'set.modeling.mouseControls',
                data: {
                  level: 'user',
                  value: e.target.value as CameraSystem,
                },
              })
            }}
          >
            {cameraSystems.map((program) => (
              <option key={program} value={program}>
                {program}
              </option>
            ))}
          </select>
          <ul className="mx-4 my-2 text-sm leading-relaxed">
            <li>
              <strong>Pan:</strong>{' '}
              {cameraMouseDragGuards[mouseControls.current].pan.description}
            </li>
            <li>
              <strong>Zoom:</strong>{' '}
              {cameraMouseDragGuards[mouseControls.current].zoom.description}
            </li>
            <li>
              <strong>Rotate:</strong>{' '}
              {cameraMouseDragGuards[mouseControls.current].rotate.description}
            </li>
          </ul>
        </SettingsSection>
        <OnboardingButtons
          currentSlug={onboardingPaths.CAMERA}
          dismiss={dismiss}
          next={next}
          nextText="Next: Streaming"
        />
      </div>
    </div>
  )
}