Navigation

import { DocNavigation } from "@trythis/nextjs/utils";
import { ChevronLeft, ChevronRight } from "lucide-react";
import Link from "next/link";

export const Navigation = ({ previous, next }: DocNavigation) => {
	return (
		<div className="leading-6 mt-14 mb-12 px-0.5 flex items-center text-sm font-semibold text-gray-700 dark:text-gray-200">
			{previous && (
				<Link
					href={previous.slug}
					className="flex items-center space-x-3 group">
					<ChevronLeft className="h-4 overflow-visible stroke-gray-400 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-300" />
					<span className="group-hover:text-gray-900 dark:group-hover:text-white">
						{previous.label}
					</span>
				</Link>
			)}
			{next && (
				<Link
					href={next.slug}
					className="flex items-center ml-auto space-x-3 group">
					<span className="group-hover:text-gray-900 dark:group-hover:text-white">
						{next.label}
					</span>
					<ChevronRight className="h-4 overflow-visible stroke-gray-400 group-hover:stroke-gray-600 dark:group-hover:stroke-gray-300" />
				</Link>
			)}
		</div>
	);
};