@kiwicom/orbit-components/es/deprecated/DestinationHeader/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import * as React from "react";
import styled, { css } from "styled-components";
import ChevronLeft from "../../icons/ChevronLeft";
import Heading, { StyledHeading, getHeadingToken } from "../../Heading";
import { TYPE_OPTIONS, TOKENS } from "../../Heading/consts";
import ButtonLink from "../../Button";
import { StyledButtonPrimitive } from "../../primitives/ButtonPrimitive";
import BASE_URL from "./consts";
import defaultTheme from "../../defaultTheme";
import LazyImage from "../../LazyImage";
import mq from "../../utils/mediaQuery";
import useTranslate from "../../hooks/useTranslate";
var StyledDestinationHeader = styled.div.withConfig({
  displayName: "DestinationHeader__StyledDestinationHeader",
  componentId: "yh1o1c-0"
})(["width:100%;height:80px;position:relative;box-sizing:border-box;border-radius:", ";overflow:hidden;", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.borderRadiusNormal;
}, mq.largeMobile(css(["height:120px;"])));
StyledDestinationHeader.defaultProps = {
  theme: defaultTheme
};
var StyledOverlay = styled.div.withConfig({
  displayName: "DestinationHeader__StyledOverlay",
  componentId: "yh1o1c-1"
})(["position:absolute;height:100%;width:100%;left:0;top:0;background-image:linear-gradient(to top,rgba(16,19,21,0.75),rgba(0,0,0,0));z-index:1;border-radius:", ";"], function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.borderRadiusNormal;
});
StyledOverlay.defaultProps = {
  theme: defaultTheme
};
var StyledContent = styled.div.withConfig({
  displayName: "DestinationHeader__StyledContent",
  componentId: "yh1o1c-2"
})(["position:relative;z-index:2;display:flex;height:100%;flex-direction:column;justify-content:space-between;", "{align-self:flex-start;background:none;}", ";"], StyledButtonPrimitive, mq.largeMobile(css(["", "{width:", ";height:", ";svg{width:", ";height:", ";}}"], StyledButtonPrimitive, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.heightButtonNormal;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.heightButtonNormal;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.orbit.widthIconMedium;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.heightIconMedium;
})));
StyledContent.defaultProps = {
  theme: defaultTheme
};
var StyledHeader = styled.div.withConfig({
  displayName: "DestinationHeader__StyledHeader",
  componentId: "yh1o1c-3"
})(["box-sizing:border-box;padding:", ";", ";"], function (_ref7) {
  var theme = _ref7.theme;
  return "".concat(theme.orbit.spaceXSmall, " ").concat(theme.orbit.spaceSmall);
}, mq.largeMobile(css(["padding:", ";", "{font-size:", ";font-weight:", ";}"], function (_ref8) {
  var theme = _ref8.theme;
  return "".concat(theme.orbit.spaceSmall, " ").concat(theme.orbit.spaceMedium);
}, StyledHeading, function (_ref9) {
  var theme = _ref9.theme;
  return getHeadingToken(TOKENS.sizeHeading)({
    theme: theme,
    type: TYPE_OPTIONS.TITLE1
  });
}, function (_ref10) {
  var theme = _ref10.theme;
  return getHeadingToken(TOKENS.weightHeading)({
    theme: theme,
    type: TYPE_OPTIONS.TITLE1
  });
})));
StyledHeader.defaultProps = {
  theme: defaultTheme
};

var DestinationHeaderGoBackButton = function DestinationHeaderGoBackButton(_ref11) {
  var onClick = _ref11.onClick;
  var translate = useTranslate();
  return /*#__PURE__*/React.createElement(ButtonLink, {
    size: "small",
    iconLeft: /*#__PURE__*/React.createElement(ChevronLeft, null),
    onClick: onClick,
    title: translate("breadcrumbs_back")
  });
};

var DestinationHeader = function DestinationHeader(_ref12) {
  var destinationName = _ref12.destinationName,
      goBack = _ref12.goBack,
      dataTest = _ref12.dataTest,
      image = _ref12.image;
  var destinationImage = image.toLowerCase();
  return /*#__PURE__*/React.createElement(StyledDestinationHeader, {
    "data-test": dataTest
  }, /*#__PURE__*/React.createElement(LazyImage, {
    original: {
      webp: "".concat(BASE_URL, "/photos/900x120/").concat(destinationImage, ".webp"),
      jpg: "".concat(BASE_URL, "/photos/900x120/").concat(destinationImage, ".jpg")
    },
    placeholder: {
      webp: "".concat(BASE_URL, "/photos/225x30/").concat(destinationImage, ".webp"),
      jpg: "".concat(BASE_URL, "/photos/225x30/").concat(destinationImage, ".jpg")
    },
    name: destinationName
  }), /*#__PURE__*/React.createElement(StyledOverlay, null), /*#__PURE__*/React.createElement(StyledContent, null, /*#__PURE__*/React.createElement(DestinationHeaderGoBackButton, {
    onClick: goBack
  }), /*#__PURE__*/React.createElement(StyledHeader, null, /*#__PURE__*/React.createElement(Heading, {
    inverted: true,
    type: "title2"
  }, destinationName))));
};

export default DestinationHeader;