components/Navigation/Navigator.tsx

"use client";

import useActualPathname from "@/hooks/useActualPathname";
import styles from "@/styles/Navigator.module.css";
import { flatten, resolveDocsURL } from "@/utils/pages";
import Link from "next/link";
import { FC } from "react";
import { MdArrowBack, MdArrowForward } from "react-icons/md";

interface NavigatorProps {}

const flatRoutes = flatten().filter(page => page.type !== "directory");

const Navigator: FC<NavigatorProps> = () => {
    const pathname = useActualPathname();

    const currentPage = flatRoutes.findIndex(page => {
        if (!page.href) {
            return false;
        }

        const url = resolveDocsURL(page.href);
        return url === pathname;
    });

    const nextIndex = currentPage + 1;
    const prevIndex = currentPage - 1;
    const nextPage = flatRoutes[nextIndex];
    const prevPage = flatRoutes[prevIndex];

    return (
        <div
            className={styles.root}
            data-wrap={!nextPage || !prevPage ? "true" : "false"}
        >
            {prevPage && (
                <Link
                    href={prevPage.href ? resolveDocsURL(prevPage.href) : "#"}
                    className={`${styles.navigationControl} ${styles.navigationControlBack}`}
                >
                    <div className={styles.iconWrapper}>
                        <MdArrowBack size={26} />
                    </div>
                    <div className={styles.text}>
                        <small>Back</small>
                        <span>
                            {prevPage.data?.short_name ?? prevPage.data?.title}
                        </span>
                    </div>
                </Link>
            )}
            {nextPage && (
                <Link
                    href={nextPage.href ? resolveDocsURL(nextPage.href) : "#"}
                    className={`${styles.navigationControl} ${styles.navigationControlNext}`}
                >
                    <div className={styles.text}>
                        <small>Next</small>
                        <span>
                            {nextPage.data?.short_name ?? nextPage.data?.title}
                        </span>
                    </div>
                    <div className={styles.iconWrapper}>
                        <MdArrowForward size={26} />
                    </div>
                </Link>
            )}
        </div>
    );
};

export default Navigator;
1	"use client";
2
3	import useActualPathname from "@/hooks/useActualPathname";
4	import styles from "@/styles/Navigator.module.css";
5	import { flatten, resolveDocsURL } from "@/utils/pages";
6	import Link from "next/link";
7	import { FC } from "react";
8	import { MdArrowBack, MdArrowForward } from "react-icons/md";
9
10	interface NavigatorProps {}
11
12	const flatRoutes = flatten().filter(page => page.type !== "directory");
13
14	const Navigator: FC<NavigatorProps> = () => {
15	const pathname = useActualPathname();
16
17	const currentPage = flatRoutes.findIndex(page => {
18	if (!page.href) {
19	return false;
20	}
21
22	const url = resolveDocsURL(page.href);
23	return url === pathname;
24	});
25
26	const nextIndex = currentPage + 1;
27	const prevIndex = currentPage - 1;
28	const nextPage = flatRoutes[nextIndex];
29	const prevPage = flatRoutes[prevIndex];
30
31	return (
32	<div
33	className={styles.root}
34	data-wrap={!nextPage \|\| !prevPage ? "true" : "false"}
35	>
36	{prevPage && (
37	<Link
38	href={prevPage.href ? resolveDocsURL(prevPage.href) : "#"}
39	className={`${styles.navigationControl} ${styles.navigationControlBack}`}
40	>
41	<div className={styles.iconWrapper}>
42	<MdArrowBack size={26} />
43	</div>
44	<div className={styles.text}>
45	<small>Back</small>
46	<span>
47	{prevPage.data?.short_name ?? prevPage.data?.title}
48	</span>
49	</div>
50	</Link>
51	)}
52	{nextPage && (
53	<Link
54	href={nextPage.href ? resolveDocsURL(nextPage.href) : "#"}
55	className={`${styles.navigationControl} ${styles.navigationControlNext}`}
56	>
57	<div className={styles.text}>
58	<small>Next</small>
59	<span>
60	{nextPage.data?.short_name ?? nextPage.data?.title}
61	</span>
62	</div>
63	<div className={styles.iconWrapper}>
64	<MdArrowForward size={26} />
65	</div>
66	</Link>
67	)}
68	</div>
69	);
70	};
71
72	export default Navigator;