52: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"] 53: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"] 54:T22dd,"use client"; import { useEffect, useRef, useState, useSyncExternalStore } from "react"; import Image from "next/image"; import { AlarmClock, Check, CirclePlus, Copy, Zap } from "lucide-react"; import { cn } from "@/lib/utils"; export type AvailabilityCardImage = { src: string; alt: string }; export type AvailabilityCardProps = Omit< React.ComponentProps<"article">, "title" > & { name: React.ReactNode; role?: React.ReactNode; avatar?: AvailabilityCardImage; /** Shows the pulsing dot in `accent`; false shows a grey dot. */ available?: boolean; statusLabel?: React.ReactNode; /** IANA time zone, e.g. "Asia/Kolkata". Shows a live clock; omit to hide it. */ timeZone?: string; /** Renders "Hire Me" as a link. Takes precedence over `onHire`. */ hireHref?: string; onHire?: () => void; hireLabel?: React.ReactNode; /** Shows the copy button when set. */ email?: string; onCopy?: (email: string) => void; copyLabel?: React.ReactNode; copiedLabel?: React.ReactNode; /** Text on the accent strip under the card. */ note?: React.ReactNode; noteIcon?: React.ReactNode; /** Any CSS color. Used for the strip and the availability dot. */ accent?: string; }; const COPIED_RESET_MS = 2000; export function AvailabilityCard({ name, role, avatar, available = true, statusLabel = available ? "Available for work" : "Not available", timeZone, hireHref, onHire, hireLabel = "Hire Me", email, onCopy, copyLabel = "Copy Email", copiedLabel = "Copied!", note, noteIcon = , accent = "#A8F25F", className, style, ...props }: AvailabilityCardProps) { const time = useLocalTime(timeZone); const { copied, copy } = useCopyToClipboard(); const handleCopy = async () => { if (!email) return; if (await copy(email)) onCopy?.(email); }; const hireContent = ( <> {hireLabel} ); return (

{statusLabel}

{timeZone && (

{/* Empty until mounted: the server can't know the visitor's clock. */} Local time {time ?? " "}

)}

{avatar && (

)}

{name}

{role && (

{role}

)}

{(hireHref || onHire || email) && (

{hireHref ? ( {hireContent} ) : onHire ? ( ) : null} {email && ( )}

)} {copied ? "Email copied to clipboard" : ""}

{note && (

{noteIcon} {note}

)}

); } // Raised, tactile buttons: a top highlight, a soft drop shadow and a quick press dip. const buttonClass = cn( "inline-flex h-14 cursor-pointer items-center justify-center gap-2.5 rounded-2xl px-5 text-lg font-medium text-white outline-none", "shadow-[inset_0_1px_0_rgb(255_255_255/0.08),0_10px_20px_-8px_rgb(0_0_0/0.6)] ring-1 ring-white/5", "transition-[background-color,transform] duration-[160ms] ease-[cubic-bezier(0.23,1,0.32,1)]", "active:scale-[0.97] motion-reduce:active:scale-100", "focus-visible:ring-2 focus-visible:ring-white/70", ); function SwapLabel({ visible, children, }: { visible: boolean; children: React.ReactNode; }) { return ( {children} ); } function StatusDot({ available }: { available: boolean }) { return ( {available && ( )} ); } // Formats "8:30PM" in a time zone, re-rendering on each minute boundary. function useLocalTime(timeZone: string | undefined) { return useSyncExternalStore( subscribeToMinutes, () => (timeZone ? formatTime(timeZone) : null), () => null, ); } function subscribeToMinutes(onTick: () => void) { let interval: ReturnType | undefined; const timeout = setTimeout( () => { onTick(); interval = setInterval(onTick, 60_000); }, 60_000 - (Date.now() % 60_000), ); return () => { clearTimeout(timeout); clearInterval(interval); }; } const formatters = new Map(); function formatTime(timeZone: string) { let formatter = formatters.get(timeZone); if (!formatter) { formatter = new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit", timeZone, }); formatters.set(timeZone, formatter); } return formatter .formatToParts(new Date()) .filter((part) => part.type !== "literal" || part.value === ":") .map((part) => part.value) .join(""); } function useCopyToClipboard() { const [copied, setCopied] = useState(false); const timeoutRef = useRef | undefined>( undefined, ); useEffect(() => () => clearTimeout(timeoutRef.current), []); const copy = async (text: string) => { try { await navigator.clipboard.writeText(text); } catch { return false; } setCopied(true); clearTimeout(timeoutRef.current); timeoutRef.current = setTimeout(() => setCopied(false), COPIED_RESET_MS); return true; }; return { copied, copy }; } 51:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L52",null,{"namespace":"@devsloka","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"src/registry/ui/availability-card.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]