d1a1135328
* docs: create a new UI docs project (#13233) * docs: create a new UI docs project * fix installation errors * docs: migrate UI docs content to new project (#13241) * Fix content * added examples for some components * finish adding examples * lint fix * fix build errors * delete empty files * path fixes + refactor * fix build error
72 lines
2.2 KiB
TypeScript
72 lines
2.2 KiB
TypeScript
"use client"
|
|
|
|
import { DatePicker, Button, Label } from "@medusajs/ui"
|
|
import { useState } from "react"
|
|
|
|
export default function DatePickerForm() {
|
|
const [eventDate, setEventDate] = useState<Date | null>(null)
|
|
const [reminderDate, setReminderDate] = useState<Date | null>(null)
|
|
const [submitted, setSubmitted] = useState(false)
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setSubmitted(true)
|
|
// Here you would typically send data to your API
|
|
setTimeout(() => setSubmitted(false), 5000)
|
|
}
|
|
|
|
const isFormValid = eventDate && reminderDate
|
|
|
|
return (
|
|
<div className="p-6 max-w-md border border-ui-border-base rounded-lg bg-ui-bg-base">
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
<div className="space-y-2">
|
|
<h3 className="text-ui-fg-base font-medium">Schedule Event</h3>
|
|
<p className="text-ui-fg-subtle text-ui-body-small">
|
|
Set up your event and reminder dates
|
|
</p>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="space-y-2">
|
|
<Label htmlFor="event-date">Event Date & Time</Label>
|
|
<DatePicker
|
|
id="event-date"
|
|
value={eventDate}
|
|
onChange={setEventDate}
|
|
minValue={new Date()}
|
|
aria-label="Select event date and time"
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label htmlFor="reminder-date">Reminder Date</Label>
|
|
<DatePicker
|
|
id="reminder-date"
|
|
value={reminderDate}
|
|
onChange={setReminderDate}
|
|
minValue={new Date()}
|
|
maxValue={eventDate || undefined}
|
|
aria-label="Select reminder date"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
type="submit"
|
|
disabled={!isFormValid || submitted}
|
|
className="w-full"
|
|
>
|
|
{submitted ? "Event Scheduled!" : "Schedule Event"}
|
|
</Button>
|
|
</form>
|
|
|
|
{submitted && (
|
|
<div className="mt-4 text-ui-fg-subtle text-ui-body-small">
|
|
Event scheduled for {eventDate?.toLocaleString()} with a reminder on {reminderDate?.toLocaleDateString()}.
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|