I want to build an availability component using shadcn blocks that provides an ergonomic way for users to set when they are and arent available for every week.
Now I have a good understanding of the codebase and design direction. Let me read some of the key UI components I'll need - switch, button, select, and card:
Now I have everything I need. Let me create the availability component and update the page. I'll build a clean, ergonomic weekly availability scheduler with:
I've built a clean, ergonomic weekly availability scheduler component using shadcn/ui blocks. The component features:
value/onChange props or uncontrolled with defaultsAdd the ability to convert the Availability to and from bitstrings where each bit is a half hour chunk
Now I understand the data structure. Let me add utility functions to convert between WeeklyAvailability and bitstrings. Each day has 48 half-hour chunks (24 hours * 2), and a week has 336 bits total.
Now let me update the page to demonstrate the bitstring conversion:
I've added comprehensive bitstring conversion utilities to the availability scheduler. The implementation includes:
availabilityToBitstring - Converts the availability to a 336-bit string (7 days × 48 half-hour slots), where 1 = available and 0 = unavailablebitstringToAvailability - Parses a bitstring back into WeeklyAvailability, automatically merging consecutive slots into time rangesavailabilityToHex / hexToAvailability - Compact hex encoding (84 characters vs 336 bits) for efficient storagebitstringToHex and hexToBitstring for intermediate conversionsThe demo page now shows an interactive panel where you can export your availability to bitstring/hex and import from either format to restore a schedule.