Components
Loading preview...
Delivery Scheduler This component encapsulates the entire scheduling logic, allowing users to select a date and a time slot. It is highly reusable and can be integrated into any form that requires date and time input. The selection indicator is animated using framer-motion to provide a smooth, fluid user experience.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/delivery-scheduler// Import the component and necessary hooks/utils
import { DeliveryScheduler } from '@/components/ui/delivery-scheduler';
import React from 'react';
// Main Demo Component
const DeliverySchedulerDemo = () => {
// Define the available time slots. This would typically come from an API.
const availableTimes = [
'4:30 AM', '5:00 AM', '5:30 AM',
'6:00 AM', '6:30 AM', '7:00 AM'
];
// Define the handler function for when a schedule is confirmed.
const handleSchedule = (dateTime: { date: Date; time: string }) => {
// In a real application, you would handle this data, e.g., send it to a server.
alert(
`Scheduled!\n\nDate: ${dateTime.date.toLocaleDateString()}\nTime: ${dateTime.time}`
);
};
return (
// Center the component on the page for a nice preview
<div className="flex min-h-[500px] w-full items-center justify-center bg-background p-4">
<DeliveryScheduler
timeSlots={availableTimes}
timeZone="Lisbon (GMT +1)"
onSchedule={handleSchedule}
initialDate={new Date('2025-05-05')} // Example of setting a specific start date
/>
</div>
);
};
export default DeliverySchedulerDemo;