@randy.tarampi/jsx/esm/lib/components/printable/header.js

Some common JSX components for www.randytarampi.ca

import PropTypes from "prop-types";
import React from "react";
import { Col, Container, Row } from "react-materialize";
import { CampaignLink, EmailLink, TelLink } from "../link/index";
export var PrintableHeader = (_ref) => {
  var {
    printable
  } = _ref;
  return /*#__PURE__*/React.createElement("header", {
    id: "header",
    className: "printable-header"
  }, /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Row, {
    className: "valign-wrapper"
  }, /*#__PURE__*/React.createElement(Col, {
    s: 3
  }, printable.basics.picture ? /*#__PURE__*/React.createElement("img", {
    className: "printable-header__picture",
    src: printable.basics.picture,
    alt: printable.basics.name
  }) : null), /*#__PURE__*/React.createElement(Col, {
    s: 9
  }, /*#__PURE__*/React.createElement("h1", {
    className: "printable-header__name"
  }, /*#__PURE__*/React.createElement("span", {
    className: "text"
  }, printable.basics.name)), /*#__PURE__*/React.createElement("h3", {
    className: "printable-header__label hide-on-print"
  }, printable.basics.label), /*#__PURE__*/React.createElement("div", {
    className: "printable-header__contact"
  }, /*#__PURE__*/React.createElement(Row, {
    className: "valign-wrapper hide-on-screen"
  }, /*#__PURE__*/React.createElement(Col, {
    s: 6,
    className: "printable-header__email"
  }, /*#__PURE__*/React.createElement(EmailLink, {
    email: printable.basics.email
  })), /*#__PURE__*/React.createElement(Col, {
    s: 6,
    className: "printable-header__tel"
  }, /*#__PURE__*/React.createElement(TelLink, {
    tel: printable.basics.phone
  }))), printable.basics.website || printable.basics.location && printable.basics.location.address ? /*#__PURE__*/React.createElement(Row, {
    className: "valign-wrapper hide-on-screen"
  }, printable.basics.website ? /*#__PURE__*/React.createElement(Col, {
    m: 6,
    s: 12,
    className: "printable-header__web"
  }, /*#__PURE__*/React.createElement(CampaignLink, {
    href: printable.basics.website,
    className: "link--web"
  })) : null, printable.basics.location && printable.basics.location.city ? /*#__PURE__*/React.createElement(Col, {
    m: 6,
    s: 12,
    className: "printable-header__location"
  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("i", {
    className: "fas fa-map-marker-alt"
  }), "\xA0", [printable.basics.location.address, "".concat(printable.basics.location.city, " ").concat(printable.basics.location.region).trim(), printable.basics.location.postalCode].filter(component => !!component).join(" "))) : null) : null)))));
};
PrintableHeader.propTypes = {
  printable: PropTypes.object.isRequired
};
export default PrintableHeader;