{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"availability-badge","type":"registry:component","title":"Availability badge","description":"Shows when the owner is working, and when that overlaps with your day.","author":"Yash Bavadiya ","dependencies":[],"registryDependencies":["utils"],"files":[{"path":"components/availability-badge.tsx","type":"registry:component","content":"\"use client\";\n\nimport {\n useEffect,\n useId,\n useLayoutEffect,\n useRef,\n useState,\n useSyncExternalStore,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/* The teachable part: the badge is one card clipped down to a pill. Opening\n it animates clip-path from the pill's box to the card's box, so the pill\n you are pointing at never moves or redraws; the rest of the card is\n uncovered around it. The strip below it answers the question a visitor\n actually has: when are we both awake and working? */\n\nexport type Availability = \"available\" | \"busy\" | \"away\";\n\nconst STATUS: Record = {\n // Status colors are data, read as traffic lights, so they are raw values\n // tuned per theme rather than tokens.\n available: { label: \"Available for work\", dot: \"light-dark(#16a34a, #3fcf6e)\" },\n busy: { label: \"Booked until March\", dot: \"light-dark(#d97706, #f5a524)\" },\n away: { label: \"Away, back Monday\", dot: \"light-dark(#8f8f8f, #737373)\" },\n};\n\nconst PULSE_CSS = `\n@keyframes availability-sonar { from { transform: scale(1); opacity: .55 } to { transform: scale(2.6); opacity: 0 } }\n@keyframes availability-beat { 0%, 40%, 100% { transform: scale(1) } 12% { transform: scale(1.35) } 26% { transform: scale(1.15) } }\n@media (prefers-reduced-motion: reduce) { .availability-pulse { animation: none !important } }\n`;\n\nconst DAY = 1440;\n\n/* Time */\n\nfunction offsetMinutes(timeZone: string, at: Date) {\n const parts = new Intl.DateTimeFormat(\"en-US\", {\n timeZone,\n hourCycle: \"h23\",\n year: \"numeric\",\n month: \"numeric\",\n day: \"numeric\",\n hour: \"numeric\",\n minute: \"numeric\",\n }).formatToParts(at);\n const get = (t: string) => Number(parts.find((p) => p.type === t)?.value);\n const asUtc = Date.UTC(get(\"year\"), get(\"month\") - 1, get(\"day\"), get(\"hour\"), get(\"minute\"));\n return Math.round((asUtc - Math.floor(at.getTime() / 60000) * 60000) / 60000);\n}\n\nconst minutesIn = (timeZone: string, at: Date) => {\n const utc = at.getUTCHours() * 60 + at.getUTCMinutes();\n return (((utc + offsetMinutes(timeZone, at)) % DAY) + DAY) % DAY;\n};\n\nfunction clock(minutes: number) {\n const h = Math.floor(minutes / 60) % 24;\n const m = minutes % 60;\n const suffix = h < 12 ? \"am\" : \"pm\";\n const h12 = h % 12 === 0 ? 12 : h % 12;\n return m === 0 ? `${h12}${suffix}` : `${h12}:${String(m).padStart(2, \"0\")}${suffix}`;\n}\n\nconst city = (timeZone: string) => timeZone.split(\"/\").pop()!.replace(/_/g, \" \");\n\n// One shared minute clock. It ticks on the minute boundary, not every 60s\n// from mount, so the displayed time never lags the real one.\nconst minuteStore = (() => {\n let now = 0;\n const subs = new Set<() => void>();\n let timer: ReturnType | undefined;\n const tick = () => {\n now = Date.now();\n subs.forEach((f) => f());\n timer = setTimeout(tick, 60000 - (Date.now() % 60000) + 50);\n };\n return {\n subscribe(f: () => void) {\n subs.add(f);\n if (subs.size === 1) tick();\n return () => {\n subs.delete(f);\n if (subs.size === 0) clearTimeout(timer);\n };\n },\n get: () => now,\n };\n})();\n\n// Zero on the server and during hydration, so nothing time based renders\n// until the client knows the real time.\nconst useNow = () => useSyncExternalStore(minuteStore.subscribe, minuteStore.get, () => 0);\n\nconst noop = () => () => {};\nconst useVisitorZone = () =>\n useSyncExternalStore(\n noop,\n () => Intl.DateTimeFormat().resolvedOptions().timeZone,\n () => null,\n );\n\n/* Ranges on a 24h clock, split where they wrap past midnight. */\n\ntype Span = [number, number];\n\nfunction spans(start: number, end: number): Span[] {\n const s = ((start % DAY) + DAY) % DAY;\n const len = (((end - start) % DAY) + DAY) % DAY || DAY;\n return s + len <= DAY ? [[s, s + len]] : [[s, DAY], [0, s + len - DAY]];\n}\n\nfunction intersect(a: Span[], b: Span[]): Span[] {\n const out: Span[] = [];\n for (const [a0, a1] of a)\n for (const [b0, b1] of b) {\n const s = Math.max(a0, b0);\n const e = Math.min(a1, b1);\n if (e > s) out.push([s, e]);\n }\n // A window crossing midnight comes back as two pieces; the one starting\n // later in the day is where it really begins.\n return out.sort((x, y) => x[0] - y[0]);\n}\n\n/* The little sky: a sun by day, a moon by night, riding one arc. */\n\nfunction Sky({ minutes }: { minutes: number }) {\n const day = minutes >= 360 && minutes < 1080;\n // 6am to 6pm maps across the arc for the sun, 6pm to 6am for the moon.\n const t = ((minutes - (day ? 360 : 1080) + DAY) % DAY) / 720;\n const angle = Math.PI * (1 - t);\n const x = 12 + 9 * Math.cos(angle);\n const y = 12 - 8 * Math.sin(angle);\n return (\n \n \n \n \n {day ? (\n \n ) : (\n \n )}\n \n \n );\n}\n\nfunction StatusDot({ status }: { status: Availability }) {\n const color = STATUS[status].dot;\n return (\n \n {status === \"available\" && (\n // Sonar: open for business, broadcasting.\n \n )}\n \n \n );\n}\n\nexport function AvailabilityBadge({\n timeZone,\n hours = [9, 18],\n status = \"available\",\n label,\n replyHint = \"Replies within a day\",\n name = \"me\",\n visitorTimeZone,\n visitorHours = [9, 18],\n className,\n}: {\n // IANA zone of the owner, like \"Europe/Lisbon\".\n timeZone: string;\n // Working hours in the owner's local time, 24h. Fractions allowed: 9.5 is 9:30.\n hours?: [number, number];\n status?: Availability;\n label?: string;\n replyHint?: string;\n name?: string;\n // Defaults to the visitor's own zone from Intl.\n visitorTimeZone?: string;\n // The visitor's assumed working day, for the overlap.\n visitorHours?: [number, number];\n className?: string;\n}) {\n const id = useId();\n const nowMs = useNow();\n const detected = useVisitorZone();\n const zone = visitorTimeZone ?? detected;\n const [open, setOpen] = useState(false);\n const card = useRef(null);\n const pill = useRef(null);\n const closeTimer = useRef>(undefined);\n // How much of the card to cut away on the right and bottom to leave just\n // the pill. Only changes on resize, never while opening.\n const [clip, setClip] = useState({ right: 0, bottom: 0 });\n\n useLayoutEffect(() => {\n const c = card.current;\n const p = pill.current;\n if (!c || !p) return;\n const measure = () =>\n setClip({ right: c.offsetWidth - p.offsetWidth, bottom: c.offsetHeight - p.offsetHeight });\n measure();\n const ro = new ResizeObserver(measure);\n ro.observe(c);\n ro.observe(p);\n return () => ro.disconnect();\n }, []);\n\n useEffect(() => () => clearTimeout(closeTimer.current), []);\n\n useEffect(() => {\n if (!open) return;\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") setOpen(false);\n };\n document.addEventListener(\"keydown\", onKey);\n return () => document.removeEventListener(\"keydown\", onKey);\n }, [open]);\n\n const show = () => {\n clearTimeout(closeTimer.current);\n setOpen(true);\n };\n // A short grace period, so crossing the gap between pill and card edge,\n // or a jittery pointer, never snaps it shut.\n const hide = () => {\n clearTimeout(closeTimer.current);\n closeTimer.current = setTimeout(() => setOpen(false), 120);\n };\n\n const ready = nowMs > 0 && zone !== null;\n const now = new Date(nowMs);\n const ownerMinutes = ready ? minutesIn(timeZone, now) : 0;\n const visitorMinutes = ready ? minutesIn(zone, now) : 0;\n const shift = ready ? offsetMinutes(zone, now) - offsetMinutes(timeZone, now) : 0;\n const same = shift === 0;\n\n // Everything below is drawn on the visitor's clock.\n const owner = spans(hours[0] * 60 + shift, hours[1] * 60 + shift);\n const visitor = spans(visitorHours[0] * 60, visitorHours[1] * 60);\n const both = intersect(owner, visitor);\n // Rejoin a window split at midnight for the sentence.\n const best: Span | null =\n both.length === 0\n ? null\n : both.length === 2 && both[0][0] === 0 && both[1][1] === DAY\n ? [both[1][0], both[0][1] + DAY]\n : both.reduce((a, b) => (b[1] - b[0] > a[1] - a[0] ? b : a));\n\n const sentence = !ready\n ? \" \"\n : best\n ? `Best time to reach me: ${clock(best[0] % DAY)} to ${clock(best[1] % DAY)} your time`\n : `Our days don't overlap. I start at ${clock(owner[0][0])} your time`;\n\n const working = owner.some(([s, e]) => visitorMinutes >= s && visitorMinutes < e);\n const pct = (m: number) => `${(m / DAY) * 100}%`;\n\n return (\n {\n if (e.pointerType !== \"touch\") show();\n }}\n onPointerLeave={(e) => {\n if (e.pointerType !== \"touch\") hide();\n }}\n // No open on focus: the keyboard opens it with Enter or Space, which\n // would otherwise shut the card that focus had just opened.\n onBlur={(e) => {\n if (!e.currentTarget.contains(e.relatedTarget as Node | null)) hide();\n }}\n >\n \n {/* The drop shadow sits on a wrapper: a filter on the parent follows\n the clipped shape, a box-shadow on the card would be clipped away. */}\n {/* Two drop shadows: a hairline that stands in for a border (a real\n border would be clipped at the pill's edge), and the lift. */}\n
\n \n {\n const n = e.nativeEvent;\n const fromMouse = n instanceof PointerEvent && n.pointerType === \"mouse\";\n setOpen((o) => (fromMouse ? true : !o));\n }}\n className=\"flex h-10 w-fit touch-manipulation items-center gap-2.5 rounded-full pr-4 pl-3.5 text-[14px] whitespace-nowrap outline-hidden transition-[scale] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-solid focus-visible:-outline-offset-2 focus-visible:outline-foreground active:scale-[0.96]\"\n >\n \n {label ?? STATUS[status].label}\n \n \n {ready && }\n {ready ? clock(ownerMinutes) : \"\"}\n in {city(timeZone)}\n \n \n\n \n

\n {replyHint}\n {ready && (\n <>\n {\" · \"}\n {working ? \"working now\" : \"off the clock right now\"} in {city(timeZone)}\n \n )}\n

\n\n
\n
\n {name === \"me\" ? \"Me\" : name}\n You\n
\n
\n {/* The shared window, lit through both tracks. */}\n {both.map(([s, e]) => (\n \n ))}\n
\n \n \n
\n
\n {[0, 6, 12, 18].map((h) => (\n \n {clock(h * 60)}\n \n ))}\n
\n {/* \"Now\" on the visitor's clock, through both tracks. */}\n {ready && (\n \n )}\n
\n
\n\n

\n {sentence}\n

\n

\n {ready && (same ? `We're both on ${city(timeZone)} time` : `You're in ${city(zone)}, I'm in ${city(timeZone)}`)}\n

\n
\n \n \n \n );\n}\n\nfunction Track({ spans, both }: { spans: Span[]; both: Span[] }) {\n const pct = (m: number) => `${(m / DAY) * 100}%`;\n return (\n
\n {spans.map(([s, e]) => (\n \n ))}\n {both.map(([s, e]) => (\n \n ))}\n
\n );\n}\n\n/* A portfolio hero using it. */\n\nconst VIEWS = [\n { value: undefined, label: \"Your zone\" },\n { value: \"America/New_York\", label: \"New York\" },\n { value: \"Asia/Kolkata\", label: \"Kolkata\" },\n { value: \"Australia/Sydney\", label: \"Sydney\" },\n] as const;\n\nexport default function AvailabilityBadgeDemo() {\n const [view, setView] = useState(0);\n const [status, setStatus] = useState(\"available\");\n return (\n
\n {/* The top of a portfolio page: who, the badge, the pitch, the ask. */}\n
\n
\n {/* eslint-disable-next-line @next/next/no-img-element -- a static\n local SVG avatar; next/image adds nothing here. */}\n \n
\n

Inês Duarte

\n

Product designer, Lisbon

\n
\n
\n \n

\n Calm software for busy teams.\n

\n

\n Previously design lead at a payments startup. Now taking on two projects a\n quarter: design systems, onboarding, and anything with a dashboard.\n

\n
\n e.preventDefault()}\n className=\"flex h-10 items-center rounded-full bg-foreground px-4 text-sm font-medium text-background outline-hidden transition-[scale] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground active:scale-[0.96]\"\n >\n Book an intro call\n \n e.preventDefault()}\n className=\"flex h-10 items-center rounded-full px-4 text-sm font-medium text-foreground shadow-[inset_0_0_0_1px_var(--border)] outline-hidden transition-[scale,background-color] duration-150 ease-out hover:bg-muted focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-foreground active:scale-[0.96]\"\n >\n Selected work\n \n
\n
\n\n
\n ({ key: s, label: s[0].toUpperCase() + s.slice(1) }))}\n value={status}\n onChange={(k) => setStatus(k as Availability)}\n />\n ({ key: String(i), label: v.label }))}\n value={String(view)}\n onChange={(k) => setView(Number(k))}\n />\n
\n
\n );\n}\n\nfunction Segmented({\n label,\n options,\n value,\n onChange,\n}: {\n label: string;\n options: { key: string; label: string }[];\n value: string;\n onChange: (key: string) => void;\n}) {\n return (\n
\n {label}\n
\n {options.map((o) => (\n onChange(o.key)}\n className={cn(\n \"h-9 touch-manipulation rounded-full px-3 text-[13px] outline-hidden transition-[scale,background-color,color] duration-150 ease-out focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-foreground active:scale-[0.96]\",\n value === o.key ? \"bg-foreground text-background\" : \"text-muted-foreground hover:bg-muted hover:text-foreground\",\n )}\n >\n {o.label}\n \n ))}\n
\n
\n );\n}\n"}],"categories":["feedback"],"docs":"From ui lab: https://lab.xevrion.dev/lab/availability-badge"}