caszl-next/app/components/Breadcrumb.tsx

import { Fragment } from "react";
import Link from "next/link";

export interface BreadcrumbItem {
  href: string;
  title: string;
}

const Breadcrumb = ({ navigations }: { navigations: BreadcrumbItem[] }) => {
  return (
    <div className={"flex text-xs text-[#13426e] truncate"}>
      <span className={"mr-2"}>当前位置:</span>
      {navigations.map((navigation, index) => {
        if (index === navigations.length - 1) {
          return (
            <span className={"overflow-hidden truncate"} key={navigation.href}>
              {navigation.title}
            </span>
          );
        } else {
          return (
            <Fragment key={navigation.href}>
              <Link href={navigation.href}>{navigation.title}</Link>
              <span className={"mx-2"}>/</span>
            </Fragment>
          );
        }
      })}
    </div>
  );
};

export default Breadcrumb;