@magicbell/magicbell-react/dist/esm/components/Timestamp/Timestamp.js

React components for building a notification inbox for your app

import React, { useEffect, useState } from 'react';
import { toDate } from '../../lib/date.js';
import Tooltip from '../Tooltip/Tooltip.js';
/**
 * Component to render a date or timestamp as relative time.
 *
 * @example
 * <Timestamp date={new Date()} />
 */
export default function Timestamp({ date, tooltipPlacement = 'bottom-end', delay = 250 }) {
    const [dateObj] = useState(() => toDate(date));
    const [relativeTime, setRelativeTime] = useState(dateObj.fromNow(true));
    useEffect(() => {
        const fn = () => setRelativeTime(toDate(date).fromNow(true));
        const interval = setInterval(fn, 60_000);
        return () => clearInterval(interval);
    }, [date]);
    return (React.createElement(Tooltip, { tooltip: dateObj.format('LL LT'), placement: tooltipPlacement, delay: delay },
        React.createElement("div", null, relativeTime)));
}
//# sourceMappingURL=Timestamp.js.map