text: import { Link } from "gatsby"
  import * as React from "react"
  import categories from "../../posts/category.json"
  
  const BreadCrumbs = ({ path }) => {
    const relatedCategories = getRelatedCategories({ path, categories })
  
    return relatedCategories.map((cate, i) => (
      <React.Fragment key={"breadcrumb-" + i}>
        <BreadCrumb cate={cate} />
        {i < relatedCategories.length - 1 && <CrumbDivider />}
      </React.Fragment>
    ))
  }
  
  const CrumbDivider = () => (
    <span
      className={"breadcrumb-divider"}
      style={{
        marginLeft: "4px",
        marginRight: "4px",
      }}
    >
      /
    </span>
  )
  
  const BreadCrumb = ({ cate }) => (
    // <div className={"breadcrumb"} onClick={() => navigate(cate.path)}>
    //   <span>{cate.name}</span>
    // </div>
    <Link className={"breadcrumb"} to={cate.path}>
      <span>{cate.name}</span>
    </Link>
  )
  
  const getRelatedCategories = ({ path, categories }) => {
    let relatedCategories =
      path != null
        ? categories.filter(
            cate =>
              (path.includes(cate.path) &&
                (path.match(/\//g) || []).length !==
                  (cate.path.match(/\//g) || []).length) ||
              cate.path === path
          )
        : null
  
    if (relatedCategories.length > 0) {
      relatedCategories.sort((a, b) => a.path.length - b.path.length)
    }
  
    return relatedCategories
  }
  
  export default BreadCrumbs
  