@ntragas/pouncejstest

Version:
A collection of UI components from Panther labs
45 lines (42 loc) • 1.5 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import React from 'react';
import Flex from '../Flex';
import Icon from '../Icon';
import Box from '../Box';
import Link from '../Link';

/** Breadcrumb is a way to navigate back to where you came from within the app */
var Breadcrumbs = function Breadcrumbs(_ref) {
  var items = _ref.items,
      rest = _objectWithoutPropertiesLoose(_ref, ["items"]);

  return /*#__PURE__*/React.createElement(Box, {
    as: "nav",
    "aria-label": "Breadcrumbs"
  }, /*#__PURE__*/React.createElement(Flex, {
    as: "ol"
  }, items.map(function (item, index) {
    var isLastBreadcrumb = index === items.length - 1;
    return /*#__PURE__*/React.createElement(Flex, {
      key: item.href,
      as: "li",
      alignItems: "center",
      fontSize: "medium",
      fontWeight: isLastBreadcrumb ? 'bold' : 'normal',
      "aria-current": isLastBreadcrumb ? 'page' : undefined
    }, /*#__PURE__*/React.createElement(Link, _extends({
      to: item.href,
      variant: "neutral",
      border: "none",
      truncated: true,
      maxWidth: "450px",
      "data-active": isLastBreadcrumb ? true : undefined
    }, rest), item.text), !isLastBreadcrumb && /*#__PURE__*/React.createElement(Icon, {
      type: "chevron-right",
      mx: 2,
      color: "blue-300",
      size: "medium",
      role: "presentation"
    }));
  })));
};

export default Breadcrumbs;