components/MDX/PageInfo.tsx

"use client";

import { getPageInfo } from "@/actions/pageinfo";
import useActualPathname from "@/hooks/useActualPathname";
import { branch, GITHUB_REPO_URL } from "@/utils/links";
import { Button } from "@mui/material";
import { Tooltip } from "@nextui-org/react";
import { formatDistanceToNowStrict } from "date-fns";
import { useEffect, useState } from "react";
import { MdEdit } from "react-icons/md";

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

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

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

    return (
        <div className="flex flex-col lg:flex-row gap-5 lg:gap-0 justify-between items-center">
            <div className="flex items-center gap-3">
                {avatar ? (
                    <Tooltip content={username ?? "Unknown"}>
                        <img
                            src={avatar}
                            className="w-[30px] h-[30px] rounded-full [border:1px_solid_#007bff]"
                        />
                    </Tooltip>
                ) : (
                    <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>

            <div>
                <Button
                    href={`${GITHUB_REPO_URL}/edit/${encodeURIComponent(
                        branch,
                    )}/${editURL ?? ""}`}
                    target="_blank"
                    rel="noreferrer"
                    startIcon={<MdEdit size={16} />}
                    className="-mt-1"
                >
                    Edit this page
                </Button>
            </div>
        </div>
    );
}
1	"use client";
2
3	import { getPageInfo } from "@/actions/pageinfo";
4	import useActualPathname from "@/hooks/useActualPathname";
5	import { branch, GITHUB_REPO_URL } from "@/utils/links";
6	import { Button } from "@mui/material";
7	import { Tooltip } from "@nextui-org/react";
8	import { formatDistanceToNowStrict } from "date-fns";
9	import { useEffect, useState } from "react";
10	import { MdEdit } from "react-icons/md";
11
12	export default function LastModified() {
13	const [date, setDate] = useState<Date \| null>(null);
14	const [avatar, setAvatar] = useState<string \| null>(null);
15	const [editURL, setEditURL] = useState<string \| null>(null);
16	const [username, setUsername] = useState<string \| null>(null);
17	const pathname = useActualPathname();
18
19	useEffect(() => {
20	getPageInfo(pathname)
21	.then(
22	({ avatarURL, lastModifiedDate, urlEncodedPath, username }) => {
23	setDate(lastModifiedDate);
24	setAvatar(avatarURL);
25	setEditURL(urlEncodedPath);
26	setUsername(username);
27	},
28	)
29	.catch(console.error);
30	}, [pathname]);
31
32	if (!date) {
33	return <></>;
34	}
35
36	return (
37	<div className="flex flex-col lg:flex-row gap-5 lg:gap-0 justify-between items-center">
38	<div className="flex items-center gap-3">
39	{avatar ? (
40	<Tooltip content={username ?? "Unknown"}>
41	<img
42	src={avatar}
43	className="w-[30px] h-[30px] rounded-full [border:1px_solid_#007bff]"
44	/>
45	</Tooltip>
46	) : (
47	<div className="w-[30px] h-[30px] rounded-full [border:1px_solid_#007bff] bg-[rgba(0,123,255,0.3)]"></div>
48	)}
49
50	<span className="text-[#999]">
51	Last modified{" "}
52	{formatDistanceToNowStrict(date, {
53	addSuffix: true,
54	})}
55	</span>
56	</div>
57
58	<div>
59	<Button
60	href={`${GITHUB_REPO_URL}/edit/${encodeURIComponent(
61	branch,
62	)}/${editURL ?? ""}`}
63	target="_blank"
64	rel="noreferrer"
65	startIcon={<MdEdit size={16} />}
66	className="-mt-1"
67	>
68	Edit this page
69	</Button>
70	</div>
71	</div>
72	);
73	}