Screen

"use client"; /** * @author: @dorianbaffier * @description: Seat Map * @version: 1.0.0 * @date: 2026-10-21 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Accessibility, X } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type KeyboardEvent, type MouseEvent, type PointerEvent, useEffect, useMemo, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; export interface SeatTier { name: string; price: number; /** Row letters in this tier, front to back. */ rows: string[]; } export interface SeatMapProps { title?: string; subtitle?: string; tiers?: SeatTier[]; /** Seats per block, left to right, with an aisle between blocks. */ blocks?: number[]; /** Seat ids already sold, like "D7". */ taken?: string[]; /** Seats with wheelchair space. */ accessible?: string[]; defaultSelected?: string[]; /** Most seats one booking can hold. */ maxSeats?: number; currency?: string; onChange?: (seats: string[]) => void; onContinue?: (seats: string[], total: number) => void; className?: string; } const DEFAULT_TIERS: SeatTier[] = [ { name: "Front", price: 11, rows: ["A", "B"] }, { name: "Standard", price: 15, rows: ["C", "D", "E", "F", "G"] }, { name: "Premium", price: 21, rows: ["H", "I"] }, ]; const DEFAULT_TAKEN = [ "A5", "A6", "B4", "B5", "B6", "B7", "C2", "C3", "C8", "D5", "D6", "D7", "D8", "E1", "E2", "E10", "F6", "F7", "G4", "G5", "G9", "G10", "H3", "H4", "H5", "H6", "I7", "I8", "I11", "I12", ]; interface Seat { id: string; row: string; /** 1-based seat number across the row. */ number: number; /** Index of the block (between aisles) the seat is in. */ block: number; tier: SeatTier; } interface Paint { row: string; from: number; mode: "add" | "remove"; base: string[]; } const seatOrder = (a: Seat, b: Seat) => a.row === b.row ? a.number - b.number : a.row.localeCompare(b.row); export default function SeatMap({ title = "Dune: Part Three", subtitle = "Today · 19:30 · Screen 4", tiers = DEFAULT_TIERS, blocks = [3, 6, 3], taken = DEFAULT_TAKEN, accessible = ["A1", "A12"], defaultSelected = [], maxSeats = 8, currency = "$", onChange, onContinue, className, }: SeatMapProps) { const [selected, setSelected] = useState(defaultSelected); const [focused, setFocused] = useState(null); const [limitHit, setLimitHit] = useState(false); const limitTimer = useRef>(undefined); const reduceMotion = useReducedMotion(); const paintRef = useRef(null); useEffect(() => () => clearTimeout(limitTimer.current), []); const gridRef = useRef(null); const perRow = blocks.reduce((a, b) => a + b, 0); const takenSet = useMemo(() => new Set(taken), [taken]); const accessibleSet = useMemo(() => new Set(accessible), [accessible]); const seats = useMemo(() => { const map = new Map(); for (const tier of tiers) { for (const row of tier.rows) { let number = 1; blocks.forEach((size, block) => { for (let i = 0; i < size; i++) { map.set(`${row}${number}`, { id: `${row}${number}`, row, number, block, tier, }); number += 1; } }); } } return map; }, [tiers, blocks]); const rows = tiers.flatMap((tier) => tier.rows); const selectedSet = useMemo(() => new Set(selected), [selected]); const picked = selected .map((id) => seats.get(id)) .filter((seat): seat is Seat => Boolean(seat)) .sort(seatOrder); const total = picked.reduce((sum, seat) => sum + seat.tier.price, 0); // A free seat boxed in by the booking on one side and a sold seat, the // booking or the aisle on the other is one nobody will buy. const stranded = useMemo(() => { const blocked = (id: string, block: number) => { const seat = seats.get(id); return ( !seat || seat.block !== block || takenSet.has(id) || selectedSet.has(id) ); }; const result: string[] = []; for (const seat of seats.values()) { if (takenSet.has(seat.id) || selectedSet.has(seat.id)) { continue; } const left = `${seat.row}${seat.number - 1}`; const right = `${seat.row}${seat.number + 1}`; const touchesBooking = selectedSet.has(left) || selectedSet.has(right); if ( touchesBooking && blocked(left, seat.block) && blocked(right, seat.block) ) { result.push(seat.id); } } return result; }, [seats, takenSet, selectedSet]); const update = (next: string[]) => { setSelected(next); onChange?.(next); }; const paintRange = (paint: Paint, to: number) => { const low = Math.min(paint.from, to); const high = Math.max(paint.from, to); const ids: string[] = []; for (let n = low; n <= high; n++) { const id = `${paint.row}${n}`; if (!takenSet.has(id)) { ids.push(id); } } if (paint.mode === "remove") { update(paint.base.filter((id) => !ids.includes(id))); return; } const next = [...new Set([...paint.base, ...ids])]; if (next.length > maxSeats) { setLimitHit(true); clearTimeout(limitTimer.current); limitTimer.current = setTimeout(() => setLimitHit(false), 2000); return; } update(next); }; const seatFrom = (target: EventTarget | null) => { const element = target instanceof Element ? target.closest("[data-seat]") : null; return element ? seats.get(element.dataset.seat ?? "") : undefined; }; // The grid holds the pointer, not the seat, so the drag survives crossing // from one seat to the next. const onPointerDown = (event: PointerEvent) => { const seat = seatFrom(event.target); if (!seat || takenSet.has(seat.id) || event.button !== 0) { return; } event.currentTarget.setPointerCapture(event.pointerId); const paint: Paint = { row: seat.row, from: seat.number, mode: selectedSet.has(seat.id) ? "remove" : "add", base: selected, }; paintRef.current = paint; paintRange(paint, seat.number); }; const onPointerMove = (event: PointerEvent) => { const paint = paintRef.current; if (!paint) { return; } const seat = seatFrom( document.elementFromPoint(event.clientX, event.clientY) ); if (seat && seat.row === paint.row) { paintRange(paint, seat.number); } }; const endPaint = () => { paintRef.current = null; }; // Clicks from a pointer are handled by the paint above; this is Enter and // Space on a focused seat. const onSeatClick = (event: MouseEvent, seat: Seat) => { if (event.detail !== 0) { return; } const mode = selectedSet.has(seat.id) ? "remove" : "add"; paintRange( { row: seat.row, from: seat.number, mode, base: selected }, seat.number ); }; const onGridKeyDown = (event: KeyboardEvent) => { const seat = seatFrom(event.target); if (!seat) { return; } const rowIndex = rows.indexOf(seat.row); const moves: Record = { ArrowLeft: [0, -1], ArrowRight: [0, 1], ArrowUp: [-1, 0], ArrowDown: [1, 0], }; const move = moves[event.key]; if (!move) { return; } event.preventDefault(); const row = rows[Math.min(rows.length - 1, Math.max(0, rowIndex + move[0]))]; const number = Math.min(perRow, Math.max(1, seat.number + move[1])); const id = `${row}${number}`; setFocused(id); gridRef.current?.querySelector(`[data-seat="${id}"]`)?.focus(); }; const tabStop = focused ?? picked[0]?.id ?? `${rows.at(-1)}${Math.ceil(perRow / 2)}`; const columns = blocks .map((size) => `repeat(${size}, minmax(0, 1fr))`) .join(" 0.75rem "); const money = (value: number) => `${currency}${value.toLocaleString("en-US")}`; return (

{title}

{subtitle}

{perRow * rows.length - taken.length - selected.length} left

{/* The screen, curved toward the seats. */}

SCREEN

{/* biome-ignore lint/a11y/noNoninteractiveElementInteractions: the grid only routes drags and arrow keys to the seat buttons inside it. */}

Seats {tiers.map((tier, tierIndex) => (

0 && "mt-3")} key={tier.name}>

{tier.name} · {money(tier.price)}

{tier.rows.map((row) => (

{row}

{Array.from({ length: perRow }, (_, i) => { const id = `${row}${i + 1}`; const seat = seats.get(id); if (!seat) { return null; } // Aisles are empty grid tracks between blocks. const column = i + 1 + seat.block; return ( onSeatClick(event, seat)} onFocus={() => setFocused(id)} seat={seat} tabIndex={tabStop === id ? 0 : -1} /> ); })}

{row}

))}

Drag along a row to pick several

{picked.length === 0 && ( No seats yet )} {picked.map((seat) => ( update(selected.filter((id) => id !== seat.id))} transition={{ duration: 0.22, ease: EASE_OUT }} type="button" > {seat.id} ))}

); } function SeatButton({ seat, column, label, isTaken, isSelected, isStranded, isAccessible, tabIndex, onClick, onFocus, }: { seat: Seat; column: number; label: string; isTaken: boolean; isSelected: boolean; isStranded: boolean; isAccessible: boolean; tabIndex: number; onClick: (event: MouseEvent) => void; onFocus: () => void; }) { return ( ); } function Legend({ className, label }: { className: string; label: string }) { return ( {label} ); } function Notice({ stranded, limitHit, maxSeats, }: { stranded: string[]; limitHit: boolean; maxSeats: number; }) { let message: string | null = null; if (limitHit) { message = `Up to ${maxSeats} seats per booking`; } if (stranded.length > 0) { message = `${stranded.join(", ")} would be left on its own. Try moving over one.`; if (stranded.length > 1) { message = `${stranded.join(", ")} would be left on their own. Try moving over one.`; } } return (

{message && ( {message} )}

); }

Seat Map

On this page