Skip to main content
← All notes
Building

Every booking has a one-tap Join Meet button

software

The portal bookings page shows every meeting the client has with me — upcoming and past. Each one is a BookingCard with the title, the date formatted in UK English, the time range, and a Join Meet button that opens Google Meet in a new tab. The button only appears on upcoming bookings. Past bookings render the same card but dimmed to sixty percent opacity with no button — you can see that the meeting happened, but there is nothing to tap. The visual distinction between upcoming and past is a single boolean prop called isPast. When isPast is true, the card uses the default glass border. When false, it uses an accent-tinted border generated with color-mix — twenty-five percent of the portal accent blended into transparent. That subtle border shift is enough to tell you at a glance which meetings are still ahead. The date uses Intl.DateTimeFormat with en-GB locale so it reads like Mon 5 May, not 5/5/2026. The time range uses the same formatter for both start and end with an en dash between them. Every timestamp is wrapped in a time element with an ISO datetime attribute for machine readability. The Join Meet button is forty-four pixels tall, uses the accent colour as a solid background, and labels its destination with a trailing arrow. One card component for every booking across all five service types. A mixing session review, a software sprint call, an accessibility audit walkthrough — they all use the same card, the same button, the same date format.

Comments coming soon

Sign in with TikTok to leave a comment. Coming soon.