Upcoming reminders panel with a tone-colored dot per item and the due time on the right.
The import and the props worth knowing about, in one place.
import { Calendar20 } from "@/components/beste/piece/calendar20";
<Calendar20
heading="Upcoming reminders"
reminders={[
{
"title": "Pay estimated tax",
"when": "Thu 17:00",
"tone": "rose"
},
{
"title": "Annual review prep",
"when": "Fri 09:00",
"tone": "sky"
},
{
"title": "Call parents",
"when": "Sat 11:00",
"tone": "emerald"
}
]}
bordered={false}
/>