@parkassist/pa-ui-library/dist/components/SiteSelector/SiteTitle.js

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import Palette from "../../constants/Palette";
import { Column, Row } from "../Layout/Flex";
import React from "react";
import styled from "styled-components";
import * as Icons from "../Icons";
import FontStyles from "../../constants/FontStyles";
import { CustomClock } from "./CustomClock";
const DateTimeWrapper = styled(Row)`
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`;
const ClockWrapper = styled(Column)`
  margin-right: 4px;
  font: ${FontStyles.BODY1_FONT};
  justify-content: center;  
  time {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display:inline-block;
  }
`;
export const SiteTitle = ({
  children,
  onClick,
  timezone,
  titleRef,
  timeFormat,
  singleSite,
  language
}) => {
  const time = _jsxs(Row, {
    children: [_jsx(ClockWrapper, {
      style: {
        marginRight: 4,
        font: FontStyles.BODY1_FONT
      },
      children: _jsx(CustomClock, {
        timezone: timezone,
        format: timeFormat,
        language: language
      })
    }), _jsx(Column, {
      style: {
        font: FontStyles.BODY1_FONT
      },
      children: "(" + timezone + ")"
    })]
  });
  return _jsxs("div", {
    ref: titleRef,
    style: {
      cursor: "pointer",
      backgroundColor: Palette.LIGHT_BLACK,
      borderRadius: 5,
      font: FontStyles.BODY1_FONT,
      height: 40,
      display: "flex",
      flexDirection: "row"
    },
    children: [_jsx(Column, {
      style: {
        font: FontStyles.SUBHEADER,
        marginLeft: 10,
        marginRight: 10,
        justifyContent: "center"
      },
      children: _jsx(Icons.MapsIcon, {
        filter: `${Palette.FILTER_DARK_GREY}`
      })
    }), _jsx(Column, {
      onClick: onClick,
      style: {
        justifyContent: "center",
        color: Palette.WHITE,
        font: FontStyles.BODY1_FONT,
        marginRight: 10
      },
      children: _jsxs(Row, {
        children: [_jsx(DateTimeWrapper, {
          style: {
            minWidth: 140,
            marginRight: 16,
            font: FontStyles.BODY1_FONT
          },
          children: children
        }), _jsx(Column, {
          style: {
            marginLeft: 8,
            justifyContent: "center",
            color: Palette.DIM_GREY
          }
        }), _jsx("span", {
          style: {
            marginLeft: 8,
            font: FontStyles.BODY1_FONT,
            color: Palette.DIM_GREY
          },
          children: time
        })]
      })
    }), !singleSite && _jsx(Column, {
      style: {
        justifySelf: "flex-end",
        fontSize: FontStyles.SUBHEADER,
        marginLeft: 2,
        marginRight: 10,
        justifyContent: "center"
      },
      children: _jsx(Icons.OpenArrowIcon, {
        filter: `${Palette.DIM_GREY}`
      })
    })]
  });
};