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	rakinar2	575	"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;