# Turntable review

A React block (a whole screen) in [Beamline](https://beamline.io/)'s [Hotel & restaurant](https://beamline.io/components/apps/hotel-restaurant) app. Live demo: https://beamline.io/components/turntable-review

A 3D asset reviewed on a turntable. The object large at the angle in view with front, side and back said, standing on a plate whose rim shows the twelve 30° sectors (looked at drawn solid, not yet dashed in the warning tone) and each note's pin, all turning with it; under it a strip of the twelve angles, each seen or not with its open notes dotted, pressing one turning the table there; notes by angle beside it, picking one turning the table there; new notes left at the angle in view; notes resolved and reopened; and which angles nobody has looked at yet, so a review covers the whole object. renderView brings the real asset (a render per angle, a 3D viewer frame or a drawing); without it a plain box of the model's proportions turns.

## Use it for

- Reviewing a 3D asset, prop or product model where notes belong to a viewing angle.
- Any turnaround review where the reviewer must cover every side.

## Not for

- Notes on video time ([cut-review](https://beamline.io/components/cut-review)).
- A full 3D viewer with orbit controls.

## Anatomy

- viewer: name, version, angle and facing; the object at the angle (renderView or a plain box); the plate with the twelve sectors and note pins, turning with it; the strip of twelve angles; angle slider; what's not been looked at
- notes: open count; each note's angle (turns the table), author, text, resolve; the note nearest the angle in view marked; a note at the angle in view
- phone: the viewer, then the strip in two rows of six, then the notes

## States

- not looked at
- every angle looked at
- open note
- resolved note
- no notes

## Keyboard

- Arrow keys on the angle slider turn the table
- Tab to a note's angle to turn there

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `model` (required) | `TurntableModel` | — |  |
| `comments` (required) | `AngleComment[]` | — |  |
| `onCommentsChange` | `((c: AngleComment[]) => void)` | — |  |
| `author` (required) | `string` | — |  |
| `angle` | `number` | — |  |
| `defaultAngle` | `number` | — |  |
| `onAngleChange` | `((a: number) => void)` | — |  |
| `defaultSeen` | `number[]` | — | Sectors (of 30°) already looked at, by index 0–11. |
| `className` | `string` | — | Classes on the documented visual root; no override by default. |
| `style` | `CSSProperties` | — | Inline styles on the documented visual root; no overrides by default. |
| `ref` | `Ref<HTMLDivElement>` | — | Receives the documented native target or imperative handle; omitted by default. |
| `renderView` | `((angle: number, size: "stage" \| "thumb") => ReactNode)` | — | The asset at an angle (0 = its front): a render for that angle, a frame of a 3D viewer, or a drawing. Called for the stage and for each of the twelve angles in the strip ("thumb"). Omitted: a plain box of the model's proportions. |

## Built from

- slider
- textarea
- button
- badge

## Dependencies

`lucide-react`

## Import

```tsx
import { TurntableReview } from "@beamline/turntable-review";
```

## Get it

Turntable review is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Hotel & restaurant

- [Reservation desk](https://beamline.io/components/reservation-desk): A front desk's bookings without a room for a night, beside the rooms that could take them: bookings grouped by room type with their stay, party and…
- [Table service](https://beamline.io/components/table-service): A restaurant table's service in three places sharing one order. The floor: tables placed on a plan by drag, arrow keys or typed numbers (Shift and an…
- [Counter service](https://beamline.io/components/counter-service): A counter and its kitchen. The counter: the order on the left (its name, eat here / takeaway / drive-through, each line with its options and quantity…
- [Room readiness](https://beamline.io/components/room-readiness): Housekeeping's rooms for the day: condition, occupancy, the front desk's plan (arriving with its time or not known, departing, staying on), who is…
- [Stay folio](https://beamline.io/components/stay-folio): A stay's folio: the chosen folio's lines filtered by kind, posted and pending said, voided lines on request, every row in the ledger's currency; beside…
- [Guest messages](https://beamline.io/components/guest-messages): Conversations with guests beside the booking each is about, for a host stand, salon front desk or hotel. Guests waiting for an answer come first with how…
- [Shift briefing](https://beamline.io/components/shift-briefing): A team's pre-shift briefing for a restaurant service (or any shift with bookings): the venue, the service and when its reservation snapshot was read, an…
- [Map explorer](https://beamline.io/components/map-explorer): A map with one operational layer over real ground (an optional map base: relief, lakes, streams, woods, roads), explored without losing your place; its…
- [Page header](https://beamline.io/components/page-header): The top of a record or project page: breadcrumb, title with status, description and meta, a primary action with secondary actions that fold into a More…

Part of [Beamline UI: polished, editable React components and complete screens for custom applications](https://beamline.io/). [Build your own style from any look; tokens, fonts, radii, motion; not only colours](https://beamline.io/docs/customize).