shadcn.io is not affiliated with official shadcn/ui
Reading Queue Kanban Block for Ark UI
A three-column reading list (To read, Reading, Finished) of eleven books with page counts, a pages-left line on every card, and a Log 25 pages button that finishes a book at its last page.
Installation
Overview
Keep track of what is next on the shelf with this reading queue for React with Ark UI. A hairline frame with a plus mark on each corner holds three columns, To read, Reading and Finished, and eleven books, each with its author and its page count. Every card says how many pages are left: a book to read has all of them, a book in progress reads "142 of 320 pages, 178 left" under a thin bar, and a finished book has none. "Log 25 pages" on a Reading card adds pages and moves the book to Finished at the last one; moving a book to Finished marks it all read, and back to To read starts it again. The column heads add up the pages and the sentence under the heading says how many remain. Cards also move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to". A polite status line reports each change and Reset restores the shelf. On a phone the columns scroll sideways in one named region. For reading lists, course reading and any queue with a size.
FAQ
How do I fill it with my own books?
Edit COLUMNS and START. A book has an id, the column it starts in, a title, an author, its pages and the pages read so far (zero to read, all when finished). Every pages-left figure, column total and the header sentence is calculated from those.
How are the pages left worked out?
leftOf is the pages minus the pages read, leftIn adds them over a column, and the header adds them over the shelf. settleCards keeps the numbers honest after a move: a book dropped in Finished is read to the end, one sent back to To read has none read, and one moved out of Finished into Reading starts again from page one.
What does Log 25 pages do?
It adds the STEP constant to the pages read, says how many are left in the status line, and when the last page is reached it moves the book to Finished through put, like any other move. The button's name includes the book's title for screen readers.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Space or Enter picks it up, the arrow keys move it (left and right change column and swap in right-to-left languages, up and down change its place), Space drops it and Escape puts it back. Each step is announced in the status line.