Meeting-room chooser where each row shows the room, its capacity, and an emerald Free or rose Booked pill.
The import and the props worth knowing about, in one place.
import { Calendar18 } from "@/components/beste/piece/calendar18";
<Calendar18
heading="Pick a room"
rooms={[
{
"name": "The Archive",
"capacity": 8,
"availableFrom": "Free now",
"active": true
},
{
"name": "Orbit",
"capacity": 4,
"availableFrom": "Free at 14:15"
},
{
"name": "Boardroom",
"capacity": 12,
"availableFrom": "Booked"
}
]}
bordered={false}
/>