38 lines
912 B
TypeScript
38 lines
912 B
TypeScript
import { Typography } from "@mui/material";
|
|
import moment from "moment";
|
|
import { useEffect, useState } from "react";
|
|
|
|
interface Props {
|
|
/** RFC3339 timestamp string */
|
|
timestamp: string;
|
|
}
|
|
|
|
/**
|
|
* Displays a timestamp as relative time (e.g. "a minute ago", "5 seconds ago").
|
|
* Uses a subtle, muted typography style.
|
|
* Refreshes every 60 seconds to keep the relative text current.
|
|
*/
|
|
export default function RelativeTimestamp({ timestamp }: Props) {
|
|
const [, setTick] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const interval = setInterval(() => setTick((t) => t + 1), 60000);
|
|
return () => clearInterval(interval);
|
|
}, []);
|
|
|
|
const date = moment(timestamp);
|
|
if (!date.isValid()) return null;
|
|
|
|
return (
|
|
<Typography
|
|
variant="caption"
|
|
sx={{
|
|
opacity: 0.7,
|
|
fontSize: "0.7rem",
|
|
fontStyle: "italic",
|
|
}}
|
|
>
|
|
{date.fromNow()}
|
|
</Typography>
|
|
);
|
|
}
|