[V0_FILE]typescriptreact:file="components/availability-scheduler.tsx" isMerged="true" "use client" import * as React from "react" import { Plus, Trash2, Copy } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/ui/select" export interface TimeSlot { id: string startTime: string endTime: string } export interface DayAvailability { enabled: boolean slots: TimeSlot[] } export interface WeeklyAvailability { monday: DayAvailability tuesday: DayAvailability wednesday: DayAvailability thursday: DayAvailability friday: DayAvailability saturday: DayAvailability sunday: DayAvailability } export type DayKey = keyof WeeklyAvailability // Bitstring utilities // Each bit represents a 30-minute chunk // Day = 48 bits (24 hours * 2) // Week = 336 bits (7 days * 48) // Order: Monday 00:00-23:30, Tuesday 00:00-23:30, ..., Sunday 00:00-23:30 const BITS_PER_DAY = 48 const DAY_ORDER: DayKey[] = [ "monday", "tuesday", "wednesday", "thursday", "friday", "saturday", "sunday", ] function timeToSlotIndex(time: string): number { const [hours, minutes] = time.split(":").map(Number) return hours * 2 + (minutes >= 30 ? 1 : 0) } function slotIndexToTime(index: number): string { const hours = Math.floor(index / 2) const minutes = index % 2 === 0 ? "00" : "30" return `${hours.toString().padStart(2, "0")}:${minutes}` } /** * Converts WeeklyAvailability to a bitstring * Each bit represents a 30-minute chunk (1 = available, 0 = unavailable) * Total: 336 bits (7 days * 48 half-hours) * Order: Monday 00:00 is bit 0, Sunday 23:30 is bit 335 */ export function availabilityToBitstring(availability: WeeklyAvailability): string { const bits: number[] = new Array(BITS_PER_DAY * 7).fill(0) DAY_ORDER.forEach((day, dayIndex) => { const dayAvailability = availability[day] if (!dayAvailability.enabled) return dayAvailability.slots.forEach((slot) => { const startIndex = timeToSlotIndex(slot.startTime) const endIndex = timeToSlotIndex(slot.endTime) // Mark all slots from start to end-1 as available // End time is exclusive (e.g., 9:00-17:00 means available from 9:00 up to but not including 17:00) for (let i = startIndex; i < endIndex; i++) { bits[dayIndex * BITS_PER_DAY + i] = 1 } }) }) return bits.join("") } /** * Converts a bitstring to WeeklyAvailability * Merges consecutive available slots into time ranges */ export function bitstringToAvailability(bitstring: string): WeeklyAvailability { // Pad or truncate to 336 bits const normalizedBits = bitstring.padEnd(BITS_PER_DAY * 7, "0").slice(0, BITS_PER_DAY * 7) const availability: WeeklyAvailability = { monday: { enabled: false, slots: [] }, tuesday: { enabled: false, slots: [] }, wednesday: { enabled: false, slots: [] }, thursday: { enabled: false, slots: [] }, friday: { enabled: false, slots: [] }, saturday: { enabled: false, slots: [] }, sunday: { enabled: false, slots: [] }, } DAY_ORDER.forEach((day, dayIndex) => { const dayBits = normalizedBits.slice( dayIndex * BITS_PER_DAY, (dayIndex + 1) * BITS_PER_DAY ) const slots: TimeSlot[] = [] let slotStart: number | null = null for (let i = 0; i <= BITS_PER_DAY; i++) { const isAvailable = i < BITS_PER_DAY && dayBits[i] === "1" if (isAvailable && slotStart === null) { // Start of a new available period slotStart = i } else if (!isAvailable && slotStart !== null) { // End of an available period slots.push({ id: crypto.randomUUID(), startTime: slotIndexToTime(slotStart), endTime: slotIndexToTime(i), }) slotStart = null } } availability[day] = { enabled: slots.length > 0, slots, } }) return availability } /** * Converts bitstring to a hex string for more compact storage */ export function bitstringToHex(bitstring: string): string { const normalizedBits = bitstring.padEnd(BITS_PER_DAY * 7, "0").slice(0, BITS_PER_DAY * 7) let hex = "" for (let i = 0; i < normalizedBits.length; i += 4) { const nibble = normalizedBits.slice(i, i + 4).padEnd(4, "0") hex += parseInt(nibble, 2).toString(16) } return hex } /** * Converts hex string back to bitstring */ export function hexToBitstring(hex: string): string { let bitstring = "" for (const char of hex) { bitstring += parseInt(char, 16).toString(2).padStart(4, "0") } return bitstring.slice(0, BITS_PER_DAY * 7) } /** * Direct conversion from availability to hex */ export function availabilityToHex(availability: WeeklyAvailability): string { return bitstringToHex(availabilityToBitstring(availability)) } /** * Direct conversion from hex to availability */ export function hexToAvailability(hex: string): WeeklyAvailability { return bitstringToAvailability(hexToBitstring(hex)) } const DAYS: { key: DayKey; label: string; shortLabel: string }[] = [ { key: "monday", label: "Monday", shortLabel: "Mon" }, { key: "tuesday", label: "Tuesday", shortLabel: "Tue" }, { key: "wednesday", label: "Wednesday", shortLabel: "Wed" }, { key: "thursday", label: "Thursday", shortLabel: "Thu" }, { key: "friday", label: "Friday", shortLabel: "Fri" }, { key: "saturday", label: "Saturday", shortLabel: "Sat" }, { key: "sunday", label: "Sunday", shortLabel: "Sun" }, ] const TIME_OPTIONS = Array.from({ length: 48 }, (_, i) => { const hours = Math.floor(i / 2) const minutes = i % 2 === 0 ? "00" : "30" const period = hours >= 12 ? "PM" : "AM" const displayHour = hours === 0 ? 12 : hours > 12 ? hours - 12 : hours return { value: `${hours.toString().padStart(2, "0")}:${minutes}`, label: `${displayHour}:${minutes} ${period}`, } }) const DEFAULT_SLOT: Omit = { startTime: "09:00", endTime: "17:00", } const createSlot = (): TimeSlot => ({ ...DEFAULT_SLOT, id: crypto.randomUUID(), }) const defaultAvailability: WeeklyAvailability = { monday: { enabled: true, slots: [createSlot()] }, tuesday: { enabled: true, slots: [createSlot()] }, wednesday: { enabled: true, slots: [createSlot()] }, thursday: { enabled: true, slots: [createSlot()] }, friday: { enabled: true, slots: [createSlot()] }, saturday: { enabled: false, slots: [] }, sunday: { enabled: false, slots: [] }, } interface AvailabilitySchedulerProps { value?: WeeklyAvailability onChange?: (value: WeeklyAvailability) => void className?: string } export function AvailabilityScheduler({ value, onChange, className, }: AvailabilitySchedulerProps) { const [availability, setAvailability] = React.useState( value || defaultAvailability ) const updateAvailability = (newAvailability: WeeklyAvailability) => { setAvailability(newAvailability) onChange?.(newAvailability) } const toggleDay = (day: DayKey) => { const newAvailability = { ...availability } const isEnabled = !newAvailability[day].enabled newAvailability[day] = { enabled: isEnabled, slots: isEnabled && newAvailability[day].slots.length === 0 ? [createSlot()] : newAvailability[day].slots, } updateAvailability(newAvailability) } const addSlot = (day: DayKey) => { const newAvailability = { ...availability } const lastSlot = newAvailability[day].slots[newAvailability[day].slots.length - 1] const newSlot = createSlot() if (lastSlot) { const endTimeIndex = TIME_OPTIONS.findIndex(t => t.value === lastSlot.endTime) if (endTimeIndex < TIME_OPTIONS.length - 2) { newSlot.startTime = TIME_OPTIONS[endTimeIndex + 1]?.value || "09:00" newSlot.endTime = TIME_OPTIONS[Math.min(endTimeIndex + 3, TIME_OPTIONS.length - 1)]?.value || "17:00" } } newAvailability[day].slots.push(newSlot) updateAvailability(newAvailability) } const removeSlot = (day: DayKey, slotId: string) => { const newAvailability = { ...availability } newAvailability[day].slots = newAvailability[day].slots.filter( (slot) => slot.id !== slotId ) updateAvailability(newAvailability) } const updateSlotTime = ( day: DayKey, slotId: string, field: "startTime" | "endTime", value: string ) => { const newAvailability = { ...availability } const slot = newAvailability[day].slots.find((s) => s.id === slotId) if (slot) { slot[field] = value updateAvailability(newAvailability) } } const copyToAll = (sourceDay: DayKey) => { const sourceSlots = availability[sourceDay].slots const newAvailability = { ...availability } DAYS.forEach(({ key }) => { if (key !== sourceDay) { newAvailability[key] = { enabled: availability[sourceDay].enabled, slots: sourceSlots.map(slot => ({ ...slot, id: crypto.randomUUID(), })), } } }) updateAvailability(newAvailability) } return (

{DAYS.map(({ key, label, shortLabel }) => ( toggleDay(key)} onAddSlot={() => addSlot(key)} onRemoveSlot={(slotId) => removeSlot(key, slotId)} onUpdateSlotTime={(slotId, field, value) => updateSlotTime(key, slotId, field, value) } onCopyToAll={() => copyToAll(key)} /> ))}

) } interface DayRowProps { dayKey: DayKey label: string shortLabel: string dayAvailability: DayAvailability onToggle: () => void onAddSlot: () => void onRemoveSlot: (slotId: string) => void onUpdateSlotTime: ( slotId: string, field: "startTime" | "endTime", value: string ) => void onCopyToAll: () => void } function DayRow({ label, shortLabel, dayAvailability, onToggle, onAddSlot, onRemoveSlot, onUpdateSlotTime, onCopyToAll, }: DayRowProps) { const { enabled, slots } = dayAvailability return (

{/* Day toggle */}

{label} {shortLabel}

{/* Time slots */}

{enabled ? (

{slots.map((slot, index) => (

onUpdateSlotTime(slot.id, "startTime", value) } aria-label={`${label} start time ${index + 1}`} /> to onUpdateSlotTime(slot.id, "endTime", value) } aria-label={`${label} end time ${index + 1}`} />

{slots.length > 1 && ( )}

))} {/* Actions */}

) : ( Unavailable )}

) } interface TimeSelectProps { value: string onChange: (value: string) => void "aria-label"?: string } function TimeSelect({ value, onChange, "aria-label": ariaLabel }: TimeSelectProps) { return ( ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Availability Scheduler', description: 'Set your weekly availability for meetings', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { AvailabilityScheduler, availabilityToBitstring, availabilityToHex, bitstringToAvailability, hexToAvailability, type WeeklyAvailability, } from "@/components/availability-scheduler" import { Button } from "@/components/ui/button" import { Clock, Binary, Hash, ArrowDownToLine, ArrowUpFromLine } from "lucide-react" import { Textarea } from "@/components/ui/textarea" import { Label } from "@/components/ui/label" export default function Page() { const [availability, setAvailability] = useState() const [bitstring, setBitstring] = useState("") const [hexString, setHexString] = useState("") const [saved, setSaved] = useState(false) const handleSave = () => { setSaved(true) setTimeout(() => setSaved(false), 2000) } const handleExportBitstring = () => { if (availability) { const bits = availabilityToBitstring(availability) setBitstring(bits) } } const handleExportHex = () => { if (availability) { const hex = availabilityToHex(availability) setHexString(hex) } } const handleImportBitstring = () => { if (bitstring) { const newAvailability = bitstringToAvailability(bitstring) setAvailability(newAvailability) } } const handleImportHex = () => { if (hexString) { const newAvailability = hexToAvailability(hexString) setAvailability(newAvailability) } } return (

{/* Header */}

Set your availability

Define when you're available for meetings each week. Toggle days on or off and add multiple time windows.

{/* Availability Scheduler */}

{/* Bitstring Export/Import */}

Bitstring Conversion

Each bit represents a 30-minute slot. 336 bits total (7 days × 48 half-hours). Order: Monday 00:00 to Sunday 23:30.

{/* Bitstring */}

Bitstring (336 bits)

setBitstring(e.target.value)}
              placeholder="e.g., 000000000000000000111111111111111100000000000000..."
              className="font-mono text-xs h-24"
            />
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={handleExportBitstring}
                disabled={!availability}
              >
                <ArrowUpFromLine className="size-3.5" />
                Export
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={handleImportBitstring}
                disabled={!bitstring}
              >
                <ArrowDownToLine className="size-3.5" />
                Import
              </Button>
            </div>
          </div>

{/* Hex */}
          <div className="space-y-2">
            <Label htmlFor="hex" className="flex items-center gap-2">
              <Hash className="size-3.5" />
              Hex (84 characters)
            </Label>
            <Textarea
              id="hex"
              value={hexString}
              onChange={(e) => setHexString(e.target.value)}
              placeholder="e.g., 0003fffe00000003fffe00000003fffe..."
              className="font-mono text-xs h-16"
            />
            <div className="flex gap-2">
              <Button
                variant="outline"
                size="sm"
                onClick={handleExportHex}
                disabled={!availability}
              >
                <ArrowUpFromLine className="size-3.5" />
                Export
              </Button>
              <Button
                variant="outline"
                size="sm"
                onClick={handleImportHex}
                disabled={!hexString}
              >
                <ArrowDownToLine className="size-3.5" />
                Import
              </Button>
            </div>
          </div>
        </div>

{/* Actions */}
        <div className="flex items-center justify-end gap-3">
          <Button variant="outline">Cancel</Button>
          <Button onClick={handleSave}>
            {saved ? "Saved!" : "Save changes"}
          </Button>
        </div>
      </div>
    </main>
  )
}</article></body></html>