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	rakinar2	575	"use client";
2
3			import { getPageInfo } from "@/actions/pageinfo";
4			import useActualPathname from "@/hooks/useActualPathname";
5	rakinar2	626	import { branch, GITHUB_REPO_URL } from "@/utils/links";
6			import { Button } from "@mui/material";
7			import { Tooltip } from "@nextui-org/react";
8	rakinar2	575	import { formatDistanceToNowStrict } from "date-fns";
9			import { useEffect, useState } from "react";
10	rakinar2	626	import { MdEdit } from "react-icons/md";
11	rakinar2	575
12			export default function LastModified() {
13			const [date, setDate] = useState<Date \| null>(null);
14			const [avatar, setAvatar] = useState<string \| null>(null);
15	rakinar2	626	const [editURL, setEditURL] = useState<string \| null>(null);
16			const [username, setUsername] = useState<string \| null>(null);
17	rakinar2	575	const pathname = useActualPathname();
18
19			useEffect(() => {
20			getPageInfo(pathname)
21	rakinar2	626	.then(
22			({ avatarURL, lastModifiedDate, urlEncodedPath, username }) => {
23			setDate(lastModifiedDate);
24			setAvatar(avatarURL);
25			setEditURL(urlEncodedPath);
26			setUsername(username);
27			},
28			)
29	rakinar2	575	.catch(console.error);
30			}, [pathname]);
31
32			if (!date) {
33			return <></>;
34			}
35
36			return (
37	rakinar2	626	<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	rakinar2	575
50	rakinar2	626	<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	rakinar2	575	</div>
72			);
73			}