@netdata/netdata-ui/dist/es6/organisms/documentation/search/results.js

netdata UI kit

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import React from "react";
import styled from "styled-components";
import { Tabs, Tab } from "../../../components/tabs";
import Flex from "../../../components/templates/flex";
import { Text } from "../../../components/typography";
import { getColor } from "../../../theme";
var Link = styled.a.withConfig({
  displayName: "results__Link",
  componentId: "sc-3ulv4x-0"
})(["text-decoration:none;&:hover,&:visited{color:", ";}"], getColor("primary"));
var Section = function Section(_ref) {
  var title = _ref.title,
    description = _ref.description,
    url = _ref.url;
  return /*#__PURE__*/React.createElement(Flex, {
    gap: 2,
    column: true
  }, /*#__PURE__*/React.createElement(Text, {
    strong: true,
    dangerouslySetInnerHTML: {
      __html: (title == null ? void 0 : title.snippet) || (title == null ? void 0 : title.raw) || "Untitled"
    }
  }), !!description && /*#__PURE__*/React.createElement(Text, {
    dangerouslySetInnerHTML: {
      __html: ((description == null ? void 0 : description.snippet) || (description == null ? void 0 : description.raw) || "No description") + "&hellip;"
    }
  }), /*#__PURE__*/React.createElement(Flex, {
    alignSelf: "end"
  }, /*#__PURE__*/React.createElement(Text, {
    as: Link,
    color: "primary",
    href: url,
    target: "_blank"
  }, "Read \u2192")));
};
var Container = function Container(props) {
  return /*#__PURE__*/React.createElement(Flex, _extends({
    overflow: {
      vertical: "auto"
    },
    padding: [6, 4],
    gap: 6,
    column: true
  }, props));
};
var StyledTabs = styled(Tabs).withConfig({
  displayName: "results__StyledTabs",
  componentId: "sc-3ulv4x-1"
})(["width:100%;.tabs > *{min-width:160px;max-width:100%;}"]);
var keys = ["learn",
// "github-cloud",
// "github-agent",
"community"];
var tabValuesByKey = {
  learn: "learn.netdata",
  community: "discourse",
  "github-cloud": "netdata-cloud",
  "github-agent": "netdata"
};
var tabNameByKey = {
  learn: "Documentation",
  community: "Community",
  "github-cloud": "Github / Cloud",
  "github-agent": "Github / Agent"
};
var SearchResults = function SearchResults(_ref2) {
  var results = _ref2.results;
  return /*#__PURE__*/React.createElement(Flex, {
    overflow: {
      vertical: "auto"
    },
    "data-testid": "searchResults",
    flex: true,
    width: "1000px",
    height: "60vh"
  }, /*#__PURE__*/React.createElement(StyledTabs, null, keys.map(function (key) {
    var tabResults = results[tabValuesByKey[key]];
    var tabResultsCount = tabResults == null ? void 0 : tabResults.length;
    return /*#__PURE__*/React.createElement(Tab, {
      key: key,
      label: "" + tabNameByKey[key] + (tabResultsCount ? "  (" + tabResultsCount + ")" : "")
    }, /*#__PURE__*/React.createElement(Container, null, !tabResultsCount ? /*#__PURE__*/React.createElement(Flex, {
      padding: [4]
    }, /*#__PURE__*/React.createElement(Text, {
      strong: true
    }, "No results")) : tabResults.map(function (result) {
      var id = result.id,
        url = result.url,
        title = result.title,
        description = result.description;
      return /*#__PURE__*/React.createElement(Section, {
        key: id.raw,
        url: url.raw,
        title: title,
        description: description
      });
    })));
  })));
};
export default SearchResults;