pankod/refine

import React from "react";
import {
  useBreadcrumb,
  useLink,
  useRefineContext,
  useRouterContext,
  useRouterType,
  useResource,
  matchResourceFromRoute,
} from "@refinedev/core";
import { RefineBreadcrumbProps } from "@refinedev/ui-types";

import {
  Breadcrumb as AntdBreadcrumb,
  BreadcrumbProps as AntdBreadcrumbProps,
} from "antd";
import { HomeOutlined } from "@ant-design/icons";

export type BreadcrumbProps = RefineBreadcrumbProps<AntdBreadcrumbProps>;

export const Breadcrumb: React.FC<BreadcrumbProps> = ({
  breadcrumbProps,
  showHome = true,
  hideIcons = false,
  meta,
}) => {
  const routerType = useRouterType();
  const { breadcrumbs } = useBreadcrumb({
    meta,
  });
  const Link = useLink();
  const { Link: LegacyLink } = useRouterContext();
  const { hasDashboard } = useRefineContext();

  const { resources } = useResource();

  const rootRouteResource = matchResourceFromRoute("/", resources);

  const ActiveLink = routerType === "legacy" ? LegacyLink : Link;

  if (breadcrumbs.length === 1) {
    return null;
  }

  const breadCrumbItems = breadcrumbs.map(({ label, icon, href }) => ({
    key: `breadcrumb-item-${label}`,
    title: (
      <div
        style={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          gap: 4,
        }}
      >
        {!hideIcons && icon}
        {href ? (
          <ActiveLink to={href}>{label}</ActiveLink>
        ) : (
          <span>{label}</span>
        )}
      </div>
    ),
  }));

  const getBreadcrumbItems = () => {
    if (showHome && (hasDashboard || rootRouteResource.found)) {
      return [
        {
          key: "breadcrumb-item-home",
          title: (
            <ActiveLink to="/">
              {rootRouteResource?.resource?.meta?.icon ?? <HomeOutlined />}
            </ActiveLink>
          ),
        },
        ...breadCrumbItems,
      ];
    }

    return breadCrumbItems;
  };

  return <AntdBreadcrumb items={getBreadcrumbItems()} {...breadcrumbProps} />;
};