4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1cd3,import { useState } from 'react' import { Card } from '../surface' import { Stack, Row, Spacer } from '../layout' import { Heading, Text, Eyebrow } from '../text' import { Button } from '../Button' import { Segmented } from '../Segmented' import { Badge } from '../media' import { Empty as EmptyState } from '../feedback' import { Icon } from '../Icon' interface Event { time: string /** Minutes the event occupies — the free-slot math below needs an end, not * just a start. */ duration: number title: string who: string tone: 'purple' | 'pink' | 'blue' | 'mint' | 'yellow' } interface Day { weekday: string date: string events: Event[] } const DAYS: Day[] = [ { weekday: 'Wednesday', date: 'July 18', events: [ { time: '11:00', duration: 60, title: 'Customer call', who: 'Sales', tone: 'blue' }, { time: '15:00', duration: 45, title: 'Retro', who: 'Whole team', tone: 'purple' }, ] }, { weekday: 'Thursday', date: 'July 19', events: [ { time: '09:00', duration: 15, title: 'Standup', who: 'Whole team', tone: 'blue' }, { time: '10:30', duration: 30, title: 'Design review — cushions', who: 'Maya, Grace', tone: 'purple' }, { time: '12:00', duration: 45, title: 'Lunch & learn', who: 'Optional', tone: 'yellow' }, { time: '14:00', duration: 30, title: '1:1 with Alan', who: 'Alan T.', tone: 'mint' }, { time: '16:00', duration: 45, title: 'Ship review', who: 'Katherine, you', tone: 'pink' }, ] }, { weekday: 'Friday', date: 'July 20', events: [ { time: '13:00', duration: 120, title: 'Deep work', who: 'You', tone: 'mint' }, ] }, ] // Bounds for the visible day and the point "now" sits at — fixed rather than // wall-clock so the demo always renders the same free slots and now-line. const DAY_START = 9 * 60 const DAY_END = 17 * 60 const FREE_THRESHOLD = 60 const NOW_MINUTES = 11 * 60 + 15 const TODAY_INDEX = 1 function toMinutes(time: string): number { const [h, m] = time.split(':').map(Number) return (h ?? 0) * 60 + (m ?? 0) } function fromMinutes(mins: number): string { const h = Math.floor(mins / 60) const m = mins % 60 return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}` } type TimelineItem = | { kind: 'event'; start: number; event: Event } | { kind: 'free'; start: number; end: number } | { kind: 'now' } /* Turns a day's sparse event list into a full timeline: gaps of at least * FREE_THRESHOLD become "free" rows, and — only for the day that is actually * "today" — a now-line is spliced in wherever NOW_MINUTES falls. */ function buildTimeline(day: Day, showNow: boolean): TimelineItem[] { const events = [...day.events].sort((a, b) => toMinutes(a.time) - toMinutes(b.time)) const items: TimelineItem[] = [] let cursor = DAY_START let nowPlaced = !showNow function placeNowBefore(start: number) { if (!nowPlaced && start > NOW_MINUTES) { items.push({ kind: 'now' }) nowPlaced = true } } for (const event of events) { const start = toMinutes(event.time) if (start - cursor >= FREE_THRESHOLD) { placeNowBefore(start) items.push({ kind: 'free', start: cursor, end: start }) } placeNowBefore(start) items.push({ kind: 'event', start, event }) cursor = Math.max(cursor, start + event.duration) } if (DAY_END - cursor >= FREE_THRESHOLD) { placeNowBefore(DAY_END) items.push({ kind: 'free', start: cursor, end: DAY_END }) } if (!nowPlaced) items.push({ kind: 'now' }) return items } function EventRow({ event }: { event: Event }) { return (

{event.time}

{event.title} {event.who}

) } function FreeRow({ start, end }: { start: number; end: number }) { return (

{fromMinutes(start)}

Free until {fromMinutes(end)} ) } function NowLine() { return (

{fromMinutes(NOW_MINUTES)}

) } /** An example day agenda: a day picker across the week, timed events, a * now-line pinned to the current moment on today's timeline, and the free * slots between events. */ export function CalendarBlock() { const [i, setI] = useState(TODAY_INDEX) const day = DAYS[i]! const isToday = i === TODAY_INDEX const timeline = buildTimeline(day, isToday) return (

{day.weekday} {isToday && Today} {day.date} setI(DAYS.findIndex((d) => d.date === date))} options={DAYS.map((d) => ({ value: d.date, label: `${d.weekday.slice(0, 3)} ${d.date.split(' ')[1]}` }))} tone="blue" /> {timeline.map((item, idx) => { if (item.kind === 'now') return if (item.kind === 'free') return return })} {day.events.length === 0 && Enjoy the quiet.} {day.events.length} {day.events.length === 1 ? 'event' : 'events'}

) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/feedback.json","https://1st-pouf.worksonmy.dev/r/icon.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/segmented.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/calendar.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/calendar.tsx"}],"className":"h-[70svh] min-h-80"}]]}]