components/MDX/BlogPageFooter.tsx

import { Tooltip } from "@mui/material";
import { formatDistanceToNowStrict } from "date-fns";
import { type FC } from "react";

type BlogPageFooterProps = {
    author:
        | string
        | {
              name: string;
              link?: string;
              icon?: string;
          };
    postedAt?: Date | string;
};

const BlogPageFooter: FC<BlogPageFooterProps> = ({
    author,
    postedAt = new Date(),
}) => {
    if (typeof author === "string") {
        author = {
            name: author,
        };
    }

    if (typeof postedAt === "string") {
        postedAt = new Date(postedAt);
    }

    return (
        <>
            <hr className="mb-3" />
            <footer className="text-neutral-400">
                <p className="not-prose mb-3 text-sm">
                    This article is licensed under the{" "}
                    <a
                        href="https://creativecommons.org/licenses/by-nc-nd/4.0/"
                        rel="license"
                        target="_blank"
                        className="underline text-blue-500 hover:text-blue-600"
                    >
                        CC BY-NC-ND 4.0
                    </a>{" "}
                    license. Copyright © {postedAt.getFullYear()} OSN
                    Developers.
                    <br />
                    Permission is hereby granted, to share this article in its
                    entirety with credit to the original author and a link to
                    this page, without any modifications or commercial purposes.
                </p>
                <div className="not-prose flex items-center gap-1.5">
                    {author.icon && (
                        <Tooltip
                            title={author.name}
                            arrow
                            classes={{
                                tooltip: "bg-neutral-800",
                                arrow: "text-neutral-800",
                            }}
                        >
                            {/* eslint-disable-next-line @next/next/no-img-element */}
                            <img
                                src={author.icon}
                                alt={author.name}
                                className="size-8 rounded-full [box-shadow:0_0_1px_2px_rgba(255,255,255,0.2)] inline-block mr-2"
                            />
                        </Tooltip>
                    )}

                    <p>
                        Posted by{" "}
                        <a
                            href={author.link ?? "#"}
                            className={
                                "text-white hover:text-neutral-300 font-semibold"
                            }
                            target={author.link ? "_blank" : ""}
                        >
                            {author.name}
                        </a>{" "}
                        on{" "}
                        {postedAt.toLocaleDateString("en-US", {
                            dateStyle: "long",
                        })}{" "}
                        (
                        {formatDistanceToNowStrict(postedAt, {
                            addSuffix: true,
                        })}
                        )
                    </p>
                </div>
            </footer>
        </>
    );
};

export default BlogPageFooter;
1	rakinar2	627	import { Tooltip } from "@mui/material";
2			import { formatDistanceToNowStrict } from "date-fns";
3			import { type FC } from "react";
4
5			type BlogPageFooterProps = {
6			author:
7			\| string
8			\| {
9			name: string;
10			link?: string;
11			icon?: string;
12			};
13			postedAt?: Date \| string;
14			};
15
16			const BlogPageFooter: FC<BlogPageFooterProps> = ({
17			author,
18			postedAt = new Date(),
19			}) => {
20			if (typeof author === "string") {
21			author = {
22			name: author,
23			};
24			}
25
26			if (typeof postedAt === "string") {
27			postedAt = new Date(postedAt);
28			}
29
30			return (
31			<>
32			<hr className="mb-3" />
33			<footer className="text-neutral-400">
34			<p className="not-prose mb-3 text-sm">
35			This article is licensed under the{" "}
36			<a
37			href="https://creativecommons.org/licenses/by-nc-nd/4.0/"
38			rel="license"
39			target="_blank"
40			className="underline text-blue-500 hover:text-blue-600"
41			>
42			CC BY-NC-ND 4.0
43			</a>{" "}
44			license. Copyright © {postedAt.getFullYear()} OSN
45			Developers.
46			<br />
47			Permission is hereby granted, to share this article in its
48			entirety with credit to the original author and a link to
49			this page, without any modifications or commercial purposes.
50			</p>
51			<div className="not-prose flex items-center gap-1.5">
52			{author.icon && (
53			<Tooltip
54			title={author.name}
55			arrow
56			classes={{
57			tooltip: "bg-neutral-800",
58			arrow: "text-neutral-800",
59			}}
60			>
61			{/* eslint-disable-next-line @next/next/no-img-element */}
62			<img
63			src={author.icon}
64			alt={author.name}
65			className="size-8 rounded-full [box-shadow:0_0_1px_2px_rgba(255,255,255,0.2)] inline-block mr-2"
66			/>
67			</Tooltip>
68			)}
69
70			<p>
71			Posted by{" "}
72			<a
73			href={author.link ?? "#"}
74			className={
75			"text-white hover:text-neutral-300 font-semibold"
76			}
77			target={author.link ? "_blank" : ""}
78			>
79			{author.name}
80			</a>{" "}
81			on{" "}
82			{postedAt.toLocaleDateString("en-US", {
83			dateStyle: "long",
84			})}{" "}
85			(
86			{formatDistanceToNowStrict(postedAt, {
87			addSuffix: true,
88			})}
89			)
90			</p>
91			</div>
92			</footer>
93			</>
94			);
95			};
96
97			export default BlogPageFooter;