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	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;