shadcn.io is not affiliated with official shadcn/ui
Reading List Timeline Block for Radix UI
Four finished books with dates and star ratings under the book in progress, with a dashed node for the day it will be finished that follows a Pages per day field.
Installation
Overview
Project a finish date from your pace with this reading list timeline for React with Radix UI. It is written for Pagetally, a fictional reading tracker. A hairline frame with a plus mark on each corner holds a vertical rail: four finished books with the day each was finished, its pages, the days it took and a read-only star rating, under the book in progress, which has a ringed node and a progress bar, and above that a dashed node for the day it will be finished. The date is worked out from the pages remaining and a pace. A "Pages per day" field at the end starts at 34; type another and the dashed node, the days to go and a status sentence follow, while the average of your finished books is derived beside it. On a narrower screen the pace cell stacks under the rail. It is built from NumberInput, Progress and Guides with CSS for the rail. For reading goals, course pacing and any task finished at a steady rate. The books are invented.
FAQ
How do I change the books and the pace?
Edit FINISHED and CURRENT at the top of the file. Pages remaining, days to go, the projected day and the average pace are derived. FIRST_PACE, LEAST_PACE and MOST_PACE set the field's start and limits.
How is the finish day worked out?
Pages remaining divided by the pace, rounded up to whole days, added to the fixed "today" in the file. It uses day numbers, not the clock, so the server and every browser write the same date.
What stays in the page?
The pace you type. Nothing is saved or sent. To make it real, store reading sessions with their pages and dates and derive today's pace from them.
What happens when I clear the field or type something odd?
The projection keeps the starting pace until the text is a number, and a number is held between 5 and 120 pages a day.