openreplay/frontend/app/components/shared/Breadcrumb/Breadcrumb.tsx

import React from 'react';
import { Icon } from 'UI';
import { Link } from 'react-router-dom';

interface Props {
  items: any;
}

function Breadcrumb(props: Props) {
  const { items } = props;
  return (
    <div className="mb-3 flex items-center text-lg">
      {items.map((item: any, index: any) => {
        if (index === items.length - 1) {
          return (
            <span key={index} className="color-gray-medium capitalize-first">
              {item.label}
            </span>
          );
        }
        if (item.to === undefined) {
          return (
            <div
              key={index}
              className="color-gray-darkest hover:text-teal group flex items-center"
            >
              <span className="color-gray-medium capitalize-first">
                {item.label}
              </span>
              <span className="mx-2">/</span>
            </div>
          );
        }
        return (
          <div
            key={index}
            className="color-gray-darkest hover:text-teal group flex items-center"
          >
            <Link to={item.to} className="flex items-center default-hover">
              {index === 0 && (
                <Icon
                  name="chevron-left"
                  size={16}
                  className="mr-1 group-hover:fill-teal"
                />
              )}
              <span className="capitalize-first">{item.label}</span>
            </Link>
            <span className="mx-2">/</span>
          </div>
        );
      })}
    </div>
  );
}

export default Breadcrumb;