shadcn.io is not affiliated with official shadcn/ui
Newsletter Scheduled Success Block for React
A start-aligned confirmation for a scheduled newsletter: a select of three send times in one zone and a table of five audience regions with the local weekday and time the issue lands, worked out from each region's offset.
Installation
Overview
Answer "when does it land for them?" on the page that confirms a send, with this newsletter confirmation for React with Base UI. It is the Pressfold page after an issue was scheduled, a whole screen with the page's rails and one band across it. The header, start-aligned, has a check in a muted tile, the heading, one sentence and, at its end, the Shine Button Go to the dashboard with Edit campaign as a quiet link. Under it a framed panel in three bands: a Native Select of three send times in Chicago (UTC-5) with one sentence on how many of the five audience regions get the issue between 08:00 and 20:00 their time; a table of the regions with their size and the local weekday and time, plus a word, Daytime or Overnight; and the page's one live line. Changing the send time re-derives every row. Nothing was scheduled. For newsletter, email and announcement tools.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was scheduled or sent. The issue, the five regions with their sizes and offsets, and the three send times are typed constants. Choosing another send time only changes this page and says "Nothing was rescheduled". To wire it, load the audience's regions from your subscriber data, save the chosen send moment through your newsletter API from the select's handler, and point Go to the dashboard and Edit campaign at your own routes.
How is each region's local time worked out?
From a lookup, not from the visitor's clock or zone. The send moment is the chosen time in Chicago minus its offset, as minutes after midnight in UTC; each region adds its own offset in minutes and the result gives the clock time and, when it passes midnight, the next weekday (Australia lands on Friday). The offsets are typed for the send day, so daylight saving is already in them. For a real product, take each offset from the zone's rules at the send moment (Intl.DateTimeFormat with formatToParts can do it) instead of typing it.
What do Daytime and Overnight mean?
A typed rule: a local time from 08:00 up to, but not including, 20:00 is Daytime, anything else is Overnight. The sentence above the table counts the regions and people on each side of that rule, so choosing a later send time can move a region out of Daytime. A filled dot means Daytime and a hollow one Overnight, so the difference never depends on colour. Change AWAKE_FROM and AWAKE_TO to your own quiet hours.
Is the table accessible, and how does it look on a phone?
It is a native table with a caption, column headers and each region's name as a row header. On a phone the People column is dropped so the table folds to Region and Local time; the sentence above it still gives the totals. The select has a visible label and works with its native picker on every device.
Related
- Pro
A full-height confirmation for a launched email campaign: four sending waves with a bar and a state word each, a Pause sending toggle that holds the running wave, and the email as sent, drawn greyscale in a frame.
- Pro
A confirmation panel for a started A/B test: two arms on shared hairlines, a slider for the traffic to Variant B, and the sample each arm needs and the days it takes, worked out from typed numbers, with a preview that applies nothing.
- Pro
A full-height confirmation centred on a ticket: the title, host and time in UTC and in a chosen zone, a QR code of the join link, a time zone select that works the local time from typed offsets, and a real calendar file download.
- Pro
Timezone and Calendar Settings
Appearance and localeA working hours settings panel: seven bars, one per day, with start and end selects and an Open switch, a week start that turns the rows, a Copy Monday to weekdays button, and a time zone pair that turns the first open day into both zones.
- Pro
Time Zone Select Form
Dates and timesA grouped select of sixteen time zones with the offset in each label, a real read of the device's own zone after the page loads, and one sentence saying how far the chosen zone is from it.
- Pro
Schedule Meeting Dialog
Time and schedulingA month page with its new event dialog shown open: a title, a day from a folded calendar, a start time and length, guest emails as tags, and a day timeline that moves with the time and warns when the meeting clashes.