@makeen.io/material-ui-kit/distr/molecules/SearchHeader/index.js

Makeen UI components kit. Based on material-ui.

import _extends from "@babel/runtime/helpers/extends";import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";function _templateObject() {var data = _taggedTemplateLiteral(["\n  display: grid;\n  grid-template-columns: 600px 1fr auto;\n  gap: 40px;\n  padding: 0.8em 1.8em;\n  justify-content: space-between;\n\n  ", ";\n\n  .avatar {\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n\n    & > span {\n      margin-right: 1em;\n    }\n  }\n\n  .input-container {\n    padding: 0.6em 1em;\n    background-color: ", ";\n    border-radius: 5px;\n    svg {\n      margin-right: 15px;\n    }\n  }\n\n  .actions {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n  }\n"]);_templateObject = function _templateObject() {return data;};return data;}import React from "react";
import Input from "@material-ui/core/Input";
import { useTheme } from "@material-ui/core/styles";
import SearchIcon from "@material-ui/icons/Search";
import { Avatar } from "../../atoms";
import styled from "styled-components";
var SearchHeaderWrapper = styled.div(_templateObject(),






function (_ref) {var variant = _ref.variant,theme = _ref.theme;return variant === "default" ? "border-bottom: 1px solid ".concat(
  theme.palette.colors.basic[300]) : "background-color: white;\n         box-shadow: 0px 0px 17px -7px rgba(0,0,0,0.67);";},















function (_ref2) {var theme = _ref2.theme;return theme.palette.colors.basic[300];});












export default (function (_ref3) {var avatarProps = _ref3.avatarProps,value = _ref3.value,_ref3$variant = _ref3.variant,variant = _ref3$variant === void 0 ? "default" : _ref3$variant,onChange = _ref3.onChange,children = _ref3.children;
  var theme = useTheme();
  return /*#__PURE__*/React.createElement(SearchHeaderWrapper, { variant: variant }, /*#__PURE__*/
  React.createElement(Input, { classes: { root: "input-container" }, disableUnderline: true, startAdornment: /*#__PURE__*/React.createElement(SearchIcon, { htmlColor: theme.palette.colors.basic[600] }), placeholder: "Search", value: value, onChange: onChange }), /*#__PURE__*/
  React.createElement("div", { className: "actions" }, children), /*#__PURE__*/
  React.createElement("div", { className: "avatar" }, /*#__PURE__*/
  React.createElement("span", null, avatarProps.title), /*#__PURE__*/
  React.createElement(Avatar, _extends({}, avatarProps))));
});
//# sourceMappingURL=index.js.map