Room Picker

Meeting-room chooser where each row shows capacity, video, and an emerald Free or rose Booked pill.

Pick a room · Thu 14:00 – 14:30
The ArchiveFloor 2 · North
8
Free now
OrbitFloor 3
4
Free from 14:15
BoardroomFloor 5 · Executive
12
Booked · next at 16:00

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Calendar18 } from "@/components/beste/piece/calendar18";

<Calendar18
  heading="Pick a room · Thu 14:00 – 14:30"
  rooms={[
    {
      "name": "The Archive",
      "floor": "Floor 2 · North",
      "capacity": 8,
      "availableFrom": "Free now",
      "video": true,
      "active": true
    },
    {
      "name": "Orbit",
      "floor": "Floor 3",
      "capacity": 4,
      "availableFrom": "Free from 14:15"
    },
    {
      "name": "Boardroom",
      "floor": "Floor 5 · Executive",
      "capacity": 12,
      "availableFrom": "Booked · next at 16:00",
      "video": true
    }
  ]}
/>