breadcrumb-item.tsx

import { IBreadcrumbItem } from "@/types";
import { ReactNode } from "react";
import Link from "next/link";

export const BreadcrumbItem = ({ children, href, isRoot, isCurrent }: IBreadcrumbItem)
:
ReactNode => {
	return (
		<>
			{ !isRoot && (<span className="opacity-50" aria-hidden="true">/</span>) }
			<li>
				<Link
					href={ href }
					aria-current={ isCurrent ? "page" : undefined }
					className={
						`transition duration-200 hover:opacity-80 capitalize
						${ isCurrent ? "bg-gradient-to-br from-[#9ebd13] to-[#008552] bg-clip-text font-bold text-transparent" : "text-gray-300" }`
					}
				>
					{ children }
				</Link>
			</li>
		</>
	);
};