@redocly/theme/lib/markdoc/components/CodeWalkthrough/CodeFilters.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.CodeFilters = CodeFilters;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const Tag_1 = require("../../../components/Tag/Tag");
function CodeFilters({ filters, getFilterState, handleFilterSelect, filtersElementRef, }) {
    if (filters.length === 0) {
        return null;
    }
    return (react_1.default.createElement(FilterWrapper, { ref: filtersElementRef, "data-component-name": "Markdoc/CodeWalkthrough/CodeFilters" }, filters.map(({ label, items, id }) => {
        return (react_1.default.createElement(Filter, { key: id },
            label && react_1.default.createElement(FilterName, null,
                label,
                ":"),
            react_1.default.createElement(ButtonsWrapper, null, items === null || items === void 0 ? void 0 : items.map((item) => {
                var _a;
                return (react_1.default.createElement(TagButton, { size: "large", borderless: true, active: ((_a = getFilterState(id)) === null || _a === void 0 ? void 0 : _a.value) === item.value, key: item.value, onClick: () => handleFilterSelect(id, item.value) }, item.value));
            }))));
    })));
}
const Filter = styled_components_1.default.div `
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-xs);
  max-width: 100%;
`;
const FilterName = styled_components_1.default.div `
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
`;
const FilterWrapper = styled_components_1.default.div `
  --tag-text-transform: none;
  display: flex;
  flex-direction: row;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  position: sticky;

  padding-top: calc(var(--spacing-xs) + var(--spacing-xl));
  padding-right: var(--spacing-xl);
  padding-left: var(--spacing-xl);
  padding-bottom: var(--spacing-xs);
  top: calc(var(--navbar-height));
  background-color: var(--bg-color);
  z-index: 1;
  max-width: var(--md-content-max-width);
`;
const ButtonsWrapper = styled_components_1.default.div `
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
`;
const TagButton = (0, styled_components_1.default)(Tag_1.Tag) `
  cursor: pointer;
  padding: 0px var(--spacing-xs);
  margin-right: var(--spacing-xs);
  max-width: 100%;
  margin-bottom: var(--spacing-xs);

  ${Tag_1.ContentWrapper} {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
`;
//# sourceMappingURL=CodeFilters.js.map