@kiwicom/orbit-components/es/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, { StyledButton } from "../Button";
import BASE_URL from "./consts";
import defaultTheme from "../defaultTheme";
import LazyImage from "../LazyImage";
import mq from "../utils/mediaQuery";
import useTranslate from "../hooks/useTranslate";
const StyledDestinationHeader = styled.div.withConfig({
  displayName: "DestinationHeader__StyledDestinationHeader",
  componentId: "sc-1yicg00-0"
})(["width:100%;height:80px;position:relative;box-sizing:border-box;border-radius:", ";overflow:hidden;", ";"], ({
  theme
}) => theme.orbit.borderRadiusNormal, mq.largeMobile(css(["height:120px;"])));
StyledDestinationHeader.defaultProps = {
  theme: defaultTheme
};
const StyledOverlay = styled.div.withConfig({
  displayName: "DestinationHeader__StyledOverlay",
  componentId: "sc-1yicg00-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:", ";"], ({
  theme
}) => theme.orbit.borderRadiusNormal);
StyledOverlay.defaultProps = {
  theme: defaultTheme
};
const StyledContent = styled.div.withConfig({
  displayName: "DestinationHeader__StyledContent",
  componentId: "sc-1yicg00-2"
})(["position:relative;z-index:2;display:flex;height:100%;flex-direction:column;justify-content:space-between;", "{align-self:flex-start;background:none;}", ";"], StyledButton, mq.largeMobile(css(["", "{width:", ";height:", ";svg{width:", ";height:", ";}}"], StyledButton, ({
  theme
}) => theme.orbit.heightButtonNormal, ({
  theme
}) => theme.orbit.heightButtonNormal, ({
  theme
}) => theme.orbit.widthIconMedium, ({
  theme
}) => theme.orbit.heightIconMedium)));
StyledContent.defaultProps = {
  theme: defaultTheme
};
const StyledHeader = styled.div.withConfig({
  displayName: "DestinationHeader__StyledHeader",
  componentId: "sc-1yicg00-3"
})(["box-sizing:border-box;padding:", ";", ";"], ({
  theme
}) => `${theme.orbit.spaceXSmall} ${theme.orbit.spaceSmall}`, mq.largeMobile(css(["padding:", ";", "{font-size:", ";font-weight:", ";}"], ({
  theme
}) => `${theme.orbit.spaceSmall} ${theme.orbit.spaceMedium}`, StyledHeading, ({
  theme
}) => getHeadingToken(TOKENS.sizeHeading)({
  theme,
  type: TYPE_OPTIONS.TITLE1
}), ({
  theme
}) => getHeadingToken(TOKENS.weightHeading)({
  theme,
  type: TYPE_OPTIONS.TITLE1
}))));
StyledHeader.defaultProps = {
  theme: defaultTheme
};

const DestinationHeaderGoBackButton = ({
  onClick
}) => {
  const translate = useTranslate();
  return React.createElement(ButtonLink, {
    size: "small",
    iconLeft: React.createElement(ChevronLeft, null),
    onClick: onClick,
    title: translate("breadcrumbs_back")
  });
};

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

export default DestinationHeader;