@redocly/theme/lib/components/Breadcrumbs/Breadcrumb.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Breadcrumb = Breadcrumb;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Link_1 = require("../../components/Link/Link");
function Breadcrumb({ label, link, isActive, onClick }) {
    return (react_1.default.createElement(BreadcrumbWrapper, { "data-component-name": "Breadcrumbs/Breadcrumb", isLink: link != null, isActive: isActive, onClick: onClick }, link ? (react_1.default.createElement(BreadcrumbLink, { to: link }, label)) : (react_1.default.createElement(BreadcrumbText, null, label))));
}
const BreadcrumbText = styled_components_1.default.div `
  cursor: default;
`;
const BreadcrumbWrapper = styled_components_1.default.div `
  border-radius: var(--border-radius);

  ${(props) => props.isLink &&
    `
    &:hover {
      text-decoration: var(--breadcrumbs-text-decoration-hover);
    }
  `}

  ${(props) => props.isActive &&
    `
    color: var(--breadcrumbs-text-color-active);
  `}
`;
const BreadcrumbLink = (0, styled_components_1.default)(Link_1.Link) `
  text-decoration: none;
  color: var(--breadcrumbs-text-color);

  &:visited {
    color: var(--breadcrumbs-text-color);
  }
`;
//# sourceMappingURL=Breadcrumb.js.map