50: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"] 51:T19b7,// Countdown Timer from Hirael // MIT · Mohammad Shehadeh · https://github.com/MohammadShehadeh/hirael 'use client'; import * as React from 'react'; import { cn } from '@/lib/utils'; export type CountdownUnit = 'days' | 'hours' | 'minutes' | 'seconds'; export interface CountdownState { days: number; hours: number; minutes: number; seconds: number; totalMs: number; isComplete: boolean; } export interface UseCountdownOptions { onComplete?: () => void; } const getCountdownState = (targetMs: number): CountdownState => { const totalMs = Math.max(targetMs - Date.now(), 0); if (!Number.isFinite(totalMs)) { return { days: 0, hours: 0, minutes: 0, seconds: 0, totalMs: 0, isComplete: true, }; } const totalSeconds = Math.floor(totalMs / 1000); return { days: Math.floor(totalSeconds / 86400), hours: Math.floor((totalSeconds % 86400) / 3600), minutes: Math.floor((totalSeconds % 3600) / 60), seconds: totalSeconds % 60, totalMs, isComplete: totalMs <= 0, }; }; /** Returns `null` until mounted, so server and hydration renders never read the clock. */ const useCountdown = (target: Date | string | number, options: UseCountdownOptions = {}): CountdownState | null => { const targetMs = new Date(target).getTime(); const [state, setState] = React.useState(null); const onCompleteRef = React.useRef(options.onComplete); React.useEffect(() => { onCompleteRef.current = options.onComplete; }); React.useEffect(() => { let fired = false; let timeout: ReturnType | undefined; const tick = () => { const next = getCountdownState(targetMs); setState(next); if (next.isComplete) { if (!fired) { fired = true; onCompleteRef.current?.(); } return; } timeout = setTimeout(tick, next.totalMs % 1000 || 1000); }; tick(); return () => { if (timeout !== undefined) clearTimeout(timeout); }; }, [targetMs]); return state; }; const REDUCED_MOTION = '(prefers-reduced-motion: reduce)'; const useReducedMotion = () => React.useSyncExternalStore( (onStoreChange) => { const query = window.matchMedia(REDUCED_MOTION); query.addEventListener('change', onStoreChange); return () => query.removeEventListener('change', onStoreChange); }, () => window.matchMedia(REDUCED_MOTION).matches, () => false, ); const CountdownTimerValue = ({ value, className, ...props }: React.ComponentProps<'span'> & { value: string }) => { const reduceMotion = useReducedMotion(); return ( {value} ); }; export interface CountdownTimerUnitProps extends Omit, 'children'> { value: number | null; label?: string; } const pad = (value: number | null) => (value === null ? '--' : String(value).padStart(2, '0')); const CountdownTimerUnit = ({ value, label, className, ...props }: CountdownTimerUnitProps) => { return (

{label && ( {label} )}

); }; const defaultLabels: Record = { days: 'Days', hours: 'Hours', minutes: 'Min', seconds: 'Sec', }; const unitOrder: CountdownUnit[] = ['days', 'hours', 'minutes', 'seconds']; export interface CountdownTimerProps extends Omit, 'children'> { target: Date | string | number; variant?: 'boxed' | 'inline' | 'minimal'; hideZeroDays?: boolean; /** Override any unit label; unset units fall back to the English defaults. */ labels?: Partial>; onComplete?: () => void; completeContent?: React.ReactNode; children?: (state: CountdownState) => React.ReactNode; } const CountdownTimer = ({ target, variant = 'boxed', hideZeroDays = false, labels, onComplete, completeContent, children, className, ...props }: CountdownTimerProps) => { const state = useCountdown(target, { onComplete }); const resolvedLabels = { ...defaultLabels, ...labels }; const units = hideZeroDays && state?.days === 0 ? unitOrder.slice(1) : unitOrder; const valueOf = (unit: CountdownUnit) => (state ? state[unit] : null); let content: React.ReactNode; if (children) { content = state ? children(state) : null; } else if (state?.isComplete && completeContent !== undefined) { content = completeContent; } else if (variant === 'boxed') { content = units.map((unit) => ( )); } else if (variant === 'inline') { content = units.map((unit, index) => ( {index > 0 && ( : )} )); } else { content = ( {units.map((unit, index) => ( {index > 0 ? : : null} ))} ); } return (

{content}

); }; export { CountdownTimer, CountdownTimerUnit, useCountdown }; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L50",null,{"files":[{"path":"registry/hirael/bases/radix/components/countdown-timer.tsx","content":"$51","type":"registry:component","target":"components/countdown-timer.tsx"}],"className":"h-[70svh] min-h-80"}]]}]