Instructor finder

A React block (a whole screen) in Beamline's Salon & fitness app.

Finding a flight instructor. Search by name or airfield, filter by what you want to learn (each subject with how many teach it nearby), by distance, and sort by nearest or free soonest. Each instructor shows where they fly from and how far, what they teach with the subjects you asked for marked, the hourly rate and the next free time; one who doesn't share a calendar reads as unknown, and one with nothing free in the window says so, never shown as free. One opens with their story, subjects, aircraft and the days ahead (free times to ask for, booked, unknown), and asking for a time says it isn't booked until they confirm; with no calendar you ask them to suggest one. With a map base (map, home and each instructor's position), the airfields are pinned on a real map with how many of the matching instructors fly from each, the open one's airfield ringed and the distance searched within drawn round home; the open instructor's next days sit under it as a week of columns (free times to ask for, booked, unknown hatched).

Use it for

A student pilot finding an instructor by subject, distance and how soon they're free.
Any directory of people booked by skill and time where some don't share availability (tutors, coaches, clinicians).

Not for

Booking crew for a production (crew-booking).
A shop's appointment page (client-booking).

Anatomy

search: name or airfield; what you want to learn; Within; Sort; the count
each instructor: avatar, name, base and distance, subjects (asked-for marked), rate, next free or unknown or booked
panel: avatar, name, base, rate; story; teaches, aircraft; the days ahead with free times, booked or unknown; the request and what it means
map (with map and home): the base, the distance ring round home with its km, a pin per airfield with the matching count (the open one ringed), airfield chips as buttons; the open instructor under it with the week as columns

States

free soon
booked through the window
calendar not shared
requested
asked to suggest
nobody matches

Keyboard

Tab through the search, subjects, distance, sort and the list; the panel's times are buttons

Props

Prop	Type	Default	Description
`instructors` (required)	`Instructor[]`	—
`subjects` (required)	`string[]`	—	Everything that can be learned, for the filter.
`today` (required)	`string`	—	"Today" as YYYY-MM-DD.
`days`	`number`	—	How many days ahead availability looks.
`onRequest`	`((instructorId: string, slot: { day: string; time: string; } \| null) => void)`	—
`defaultLearn`	`string[]`	—
`open`	`string \| null`	—	Controlled open state; omit to use defaultOpen.
`defaultOpen`	`string \| null`	—	Initial open state when uncontrolled; defaults to false.
`onOpenChange`	`((id: string \| null) => void)`	—	Reports an open-state change; no callback by default.
`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.
`map`	`MapBase`	—	A map base to pin the instructors' airfields on, with the distance you search within drawn round `home`; omitted: no map.
`home`	`{ name: string; lon: number; lat: number; }`	—	Where you are, the centre of the distance ring ("Lisbon", with its longitude and latitude).

Built from

Dependencies

lucide-react

Import

import { InstructorFinder } from "@beamline/instructor-finder";

Get it

Instructor finder is part of Beamline UI. Install the parts you need in your React app as compiled packages or editable source. Get Beamline · Connect your agent