bcr.tsx

import { BreadcrumbType } from "@/types/BreadcrumbType";
import Link from "next/link";

export default function BreadcrumbComponent({ breadcrumbs }: { breadcrumbs: Array<BreadcrumbType> }) {
    return (
        <div className="mb-4 lg:mb-7">
            <div className="flex items-center gap-1.5">
                {breadcrumbs.map((breadcrumb, index) => (
                    <div className="flex" key={index}>
                        {breadcrumb.link ? (
                            <div className="flex items-center" key={index}>
                                <div>
                                    <Link href={breadcrumb.link} className="text-green-primary font-cabin text-sm lg:text-base">
                                        {breadcrumb.text}
                                    </Link>
                                </div>
                                <div>
                                    <span className="flex items-center">
                                        &nbsp;
                                        <svg
                                            xmlns="http://www.w3.org/2000/svg"
                                            width="16"
                                            height="16"
                                            viewBox="0 0 24 24"
                                            fill="none"
                                            stroke="currentColor"
                                            strokeWidth="2"
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                            className="icon icon-tabler icons-tabler-outline icon-tabler-chevron-right"
                                        >
                                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                                            <path d="M9 6l6 6l-6 6" />
                                        </svg>
                                    </span>
                                </div>
                            </div>
                        ) : (
                            <div key={index} className="flex items-start">
                                <span className="text-green-primary font-cabin text-sm lg:text-base font-semibold inline-block overflow-hidden w-[20ch] whitespace-nowrap text-ellipsis">
                                    {breadcrumb.text}
                                </span>
                            </div>
                        )}
                    </div>
                ))}
            </div>
        </div>
    );
}