A drag-to-select time range picker for a single day, where the chosen window stays visually dominant while busy blocks, night hours and the current time fade into context behind it; collapses to a vertical day column on narrow screens.
import * as React from "react";
import TimeWindow, { fmtTime } from "@/components/ui/time-window";
const BUSY = [
{ start: 9 * 60, end: 9 * 60 + 15, label: "Standup" },
{ start: 10 * 60, end: 11 * 60, label: "Design review" },
{ start: 12 * 60 + 30, end: 13 * 60 + 15, label: "Lunch" },
{ start: 16 * 60, end: 17 * 60, label: "Deploy window" },
];
export default function TimeWindowDemo() {
const [range, setRange] = React.useState({
start: 13 * 60 + 30,
end: 15 * 60,
});
const [now, setNow] = React.useState(undefined);
React.useEffect(() => {
const tick = () => {
const d = new Date();
setNow(d.getHours() * 60 + d.getMinutes());
};
tick();
const t = window.setInterval(tick, 30000);
return () => window.clearInterval(t);
}, []);
return (
<div className="flex h-full min-h-[600px] w-full items-center justify-center overflow-auto bg-background px-4 py-10 text-foreground">
<div className="w-full max-w-[880px]">
<p className="mb-3 text-[13px] text-muted-foreground">
Book the planning session - Thursday, 1 October
</p>
<TimeWindow
theme="paper"
label="Planning session"
value={range}
onChange={setRange}
busy={BUSY}
now={now}
step={15}
minDuration={30}
maxDuration={240}
/>
<p className="mt-3 text-[12px] text-muted-foreground">
Drag the window or its edges, click the day to move it, arrows nudge
15 min, Shift for an hour. Selected {fmtTime(range.start)}-
{fmtTime(range.end)}
</p>
</div>
</div>
);
}
