Date field that reads plain English — 'next fri 3pm', 'in 2 weeks', 'end of month' — and answers on a tear-off calendar that riffles one leaf per day it moved, so you see the day it heard before you commit. Zero dependencies, keyboard accessible, static under reduced motion.
"use client"
import { TearawayDate } from "@/components/ui/tearaway-date"
const settings = {
heading: "New reminder",
task: "Send Priya the Q3 forecast",
defaultText: "next fri 3pm",
placeholder: "next fri 3pm",
use24HourClock: false,
weekStartsOnSunday: false,
showLeaf: true,
paperOnSurface: false,
maxTear: 6,
showPresets: true,
}
export default function Demo(props: Partial<typeof settings>) {
const s = { ...settings, ...props }
return (
<div className="bg-muted flex min-h-[max(560px,100svh)] w-full items-center justify-center p-6">
<div className="border-border bg-background w-full max-w-[760px] rounded-2xl border p-6 shadow-sm sm:p-8">
<h2 className="text-foreground text-lg font-semibold tracking-tight">{s.heading}</h2>
<label
htmlFor="reminder-task"
className="text-muted-foreground mt-6 block text-[13px] font-medium"
>
Task
</label>
<input
id="reminder-task"
data-slot="task-title"
type="text"
defaultValue={s.task}
className="border-input bg-background text-foreground focus-visible:ring-ring/50 focus-visible:border-ring mt-1.5 h-11 w-full rounded-md border px-3 text-[15px] outline-none focus-visible:ring-[3px]"
/>
<label
htmlFor="reminder-when"
className="text-muted-foreground mt-5 block text-[13px] font-medium"
>
When
</label>
<div className="mt-1.5">
<TearawayDate
id="reminder-when"
className="max-w-none"
defaultText={s.defaultText}
placeholder={s.placeholder}
hourCycle={s.use24HourClock ? 24 : 12}
weekStartsOn={s.weekStartsOnSunday ? 0 : 1}
showLeaf={s.showLeaf}
paperTone={s.paperOnSurface ? "surface" : "paper"}
maxTear={s.maxTear}
presets={
s.showPresets
? [
{ label: "Tomorrow", text: "tomorrow at 9am" },
{ label: "In 2 weeks", text: "in 2 weeks at 9am", slot: "cta-primary" },
{ label: "End of month", text: "end of month" },
]
: []
}
/>
</div>
<div className="border-border mt-7 flex items-center justify-between gap-3 border-t pt-5">
<p className="text-muted-foreground text-[12px]">
Understands <span className="text-foreground">in 3 days</span>,{" "}
<span className="text-foreground">18 sep</span>,{" "}
<span className="text-foreground">eom</span>.
</p>
<div className="flex gap-2">
<button
type="button"
data-slot="cancel"
className="text-muted-foreground hover:text-foreground focus-visible:ring-ring/50 h-11 rounded-md px-4 text-[14px] font-medium transition-colors outline-none focus-visible:ring-[3px]"
>
Cancel
</button>
<button
type="button"
data-slot="submit"
className="bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:ring-ring/50 h-11 rounded-md px-4 text-[14px] font-medium transition-colors outline-none focus-visible:ring-[3px]"
>
Schedule
</button>
</div>
</div>
</div>
</div>
)
}