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	rakinar2	575	"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			}