shadcn.io is not affiliated with official shadcn/ui
Month Picker Awards Block for React Aria
A prize that honours one person a month: a strip of twelve month cells with each winner's initials, and the chosen month's profile with the citation, three facts and the number of colleagues who nominated them.
Installation
Overview
A month picker for React with React Aria. A split with a divider: at the start a short header with a tally counted from the list ("9 of 12 months awarded") and twelve month cells, each the month's name and the winner's initials in a small circle, with no photographs. At the end the chosen month's profile: the winner, their role, the citation, three facts and how many colleagues nominated them. The months not yet awarded are quiet and cannot be chosen. All nine profiles share one cell, so choosing a month never moves the page. The strip is a real radio group, so arrow keys, Tab and a screen reader behave as they do for any radio group, and on a phone it scrolls sideways and opens on the chosen month. The page's rails and top rule come from the Guides spine. It's built from Guides, Avatar and native radio inputs, with CSS transitions for the entrance. The prize, the people and the figures are made up for the example: replace them with your own.
FAQ
How do I change the winners?
Edit WINNERS at the top of the file: one entry per awarded month, in month order, with the name, role, team, citation, three facts and the number of nominators. The month cells, the profile and the tally in the header are all built from that list. To open on a different month, change which entry LATEST points to.
How are months that have no winner handled?
Every month after the last entry in WINNERS is drawn as a quiet cell with a dashed circle, disabled, and read aloud as "not yet awarded". Add an entry to WINNERS and that month becomes a normal cell. The months are named without a year, so the block never goes out of date by itself.
Can I use it with the keyboard?
Yes. The strip is one tab stop; the arrow keys move between the months that have a winner and choose as they go, skipping the disabled ones. A polite line, hidden from sight, says which month and winner are showing. The profiles that are not showing are hidden from assistive technology and cannot be focused.
What changes on a phone?
The twelve cells become a single row that scrolls sideways, with the next cell peeking, and the profile moves under it. The strip scrolls itself once on load so the chosen month is in view. The block's height is the same whichever month is chosen.