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

React components for building a notification inbox for your app

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = Timestamp;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importStar(require("react"));
const date_js_1 = require("../../lib/date.js");
const Tooltip_js_1 = tslib_1.__importDefault(require("../Tooltip/Tooltip.js"));
/**
 * Component to render a date or timestamp as relative time.
 *
 * @example
 * <Timestamp date={new Date()} />
 */
function Timestamp({ date, tooltipPlacement = 'bottom-end', delay = 250 }) {
    const [dateObj] = (0, react_1.useState)(() => (0, date_js_1.toDate)(date));
    const [relativeTime, setRelativeTime] = (0, react_1.useState)(dateObj.fromNow(true));
    (0, react_1.useEffect)(() => {
        const fn = () => setRelativeTime((0, date_js_1.toDate)(date).fromNow(true));
        const interval = setInterval(fn, 60_000);
        return () => clearInterval(interval);
    }, [date]);
    return (react_1.default.createElement(Tooltip_js_1.default, { tooltip: dateObj.format('LL LT'), placement: tooltipPlacement, delay: delay },
        react_1.default.createElement("div", null, relativeTime)));
}
//# sourceMappingURL=Timestamp.js.map