use <time> element for all dates

components/RelativeTime/RelativeTime.tsx

@@ -0,0 +1,21 @@
+import { useHasMounted } from "../../hooks/use-has-mounted";
+import { formatDateTZ, formatDateISO, formatTimeAgo, FlexibleDate } from "../../lib/helpers/format-date";
+
+export type RelativeTimeProps = {
+  date: FlexibleDate;
+  className?: string;
+};
+
+const RelativeTime = ({ date, className }: RelativeTimeProps) => {
+  // play nice with SSR -- only use relative time on the client, since it'll quickly become outdated on the server and
+  // cause a react hydration mismatch error.
+  const hasMounted = useHasMounted();
+
+  return (
+    <time dateTime={formatDateISO(date)} title={formatDateTZ(date)} className={className}>
+      Updated {hasMounted ? formatTimeAgo(date) : `on ${formatDateTZ(date, "PP")}`}
+    </time>
+  );
+};
+
+export default RelativeTime;