Availability component - v0 by Vercel

Availability component - v0 by VercelAvailability component - v0 by Vercel

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.

81d ago

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:

Day toggles for each day of the week
Ability to add multiple time slots per day
Easy time selection via dropdowns
Clean minimal design

I've built a clean, ergonomic weekly availability scheduler component using shadcn/ui blocks. The component features:

Day toggles - Each day of the week can be enabled/disabled with a switch, defaulting to Mon-Fri enabled
Multiple time slots - Users can add multiple availability windows per day (e.g., 9am-12pm and 2pm-5pm)
Time dropdowns - Easy 30-minute increment selection for start/end times in 12-hour format
Copy to all - Hover over any day row to quickly apply that day's schedule to all other days
Remove slots - Delete individual time slots when multiple exist
Responsive design - Shows short day names on mobile, full names on larger screens
Controlled/uncontrolled - Works both as a controlled component with value/onChange props or uncontrolled with defaults

81d ago

Add the ability to convert the Availability to and from bitstrings where each bit is a half hour chunk

81d ago

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 = unavailable
bitstringToAvailability - Parses a bitstring back into WeeklyAvailability, automatically merging consecutive slots into time ranges
availabilityToHex / hexToAvailability - Compact hex encoding (84 characters vs 336 bits) for efficient storage
Helper functions - bitstringToHex and hexToBitstring for intermediate conversions

The 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.

81d ago

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.

81d ago

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:

Day toggles for each day of the week
Ability to add multiple time slots per day
Easy time selection via dropdowns
Clean minimal design

I've built a clean, ergonomic weekly availability scheduler component using shadcn/ui blocks. The component features:

Day toggles - Each day of the week can be enabled/disabled with a switch, defaulting to Mon-Fri enabled
Multiple time slots - Users can add multiple availability windows per day (e.g., 9am-12pm and 2pm-5pm)
Time dropdowns - Easy 30-minute increment selection for start/end times in 12-hour format
Copy to all - Hover over any day row to quickly apply that day's schedule to all other days
Remove slots - Delete individual time slots when multiple exist
Responsive design - Shows short day names on mobile, full names on larger screens
Controlled/uncontrolled - Works both as a controlled component with value/onChange props or uncontrolled with defaults

81d ago

Add the ability to convert the Availability to and from bitstrings where each bit is a half hour chunk

81d ago

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 = unavailable
bitstringToAvailability - Parses a bitstring back into WeeklyAvailability, automatically merging consecutive slots into time ranges
availabilityToHex / hexToAvailability - Compact hex encoding (84 characters vs 336 bits) for efficient storage
Helper functions - bitstringToHex and hexToBitstring for intermediate conversions

The 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.

81d ago