components/MDX/PageInfo.tsx

"use client";

import { getPageInfo } from "@/actions/pageinfo";
import useActualPathname from "@/hooks/useActualPathname";
import { formatDistanceToNowStrict } from "date-fns";
import { useEffect, useState } from "react";

export default function LastModified() {
    const [date, setDate] = useState<Date | null>(null);
    const [avatar, setAvatar] = useState<string | null>(null);
    const pathname = useActualPathname();

    useEffect(() => {
        getPageInfo(pathname)
            .then(({ avatarURL, lastModifiedDate }) => {
                setDate(lastModifiedDate);
                setAvatar(avatarURL);
            })
            .catch(console.error);
    }, [pathname]);

    if (!date) {
        return <></>;
    }

    return (
        <div className="flex items-center gap-3">
            {avatar ? (
                <img
                    src={avatar}
                    className="w-[30px] h-[30px] rounded-full [border:1px_solid_#007bff]"
                />
            ) : (
                <div className="w-[30px] h-[30px] rounded-full [border:1px_solid_#007bff] bg-[rgba(0,123,255,0.3)]"></div>
            )}

            <span className="text-[#999]">
                Last modified{" "}
                {formatDistanceToNowStrict(date, {
                    addSuffix: true,
                })}
            </span>
        </div>
    );
}
1	"use client";
2
3	import { getPageInfo } from "@/actions/pageinfo";
4	import useActualPathname from "@/hooks/useActualPathname";
5	import { formatDistanceToNowStrict } from "date-fns";
6	import { useEffect, useState } from "react";
7
8	export default function LastModified() {
9	const [date, setDate] = useState<Date \| null>(null);
10	const [avatar, setAvatar] = useState<string \| null>(null);
11	const pathname = useActualPathname();
12
13	useEffect(() => {
14	getPageInfo(pathname)
15	.then(({ avatarURL, lastModifiedDate }) => {
16	setDate(lastModifiedDate);
17	setAvatar(avatarURL);
18	})
19	.catch(console.error);
20	}, [pathname]);
21
22	if (!date) {
23	return <></>;
24	}
25
26	return (
27	<div className="flex items-center gap-3">
28	{avatar ? (
29	<img
30	src={avatar}
31	className="w-[30px] h-[30px] rounded-full [border:1px_solid_#007bff]"
32	/>
33	) : (
34	<div className="w-[30px] h-[30px] rounded-full [border:1px_solid_#007bff] bg-[rgba(0,123,255,0.3)]"></div>
35	)}
36
37	<span className="text-[#999]">
38	Last modified{" "}
39	{formatDistanceToNowStrict(date, {
40	addSuffix: true,
41	})}
42	</span>
43	</div>
44	);
45	}