@parkassist/pa-ui-library/dist/components/TopMenu/index.js

INX Platform elements

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from "react";
import styled from "styled-components";
import { Column, Row } from "../Layout/Flex";
import Palette from "../../constants/Palette";
import Measures from "../../constants/Measures";
import logo from "../../../static/Logo INX.svg";
import SiteSelector from "../SiteSelector";
import { SearchIcon } from "../Icons";
import Input from "../Input";
import ProfileButton from "../ProfileButton";
import FontStyles from "../../constants/FontStyles";
const Container = styled.div`
  width: calc(100vw - 30px);
  background-color: ${Palette.BLACK};
  border-radius: 3px;
  padding: calc(${Measures.unit} / 2) 0;
  margin: 0;
  
`;
const HeadBar = styled(Row)(() => `
            height: 54px;
            background-color: ${Palette.BLACK};
            color: ${Palette.WHITE};
            align-items: center;
            padding-left: calc(${Measures.unit} / 2);
            padding-right:calc(${Measures.unit} * 2);
            font: ${FontStyles.SUBHEADER};
            justify-content: space-between;
`);
const LogoWrapper = styled(Column)`
  width: 168px;
  align-items: start;
  padding-left: 8px;
  
`;
const sites = [{
  name: "INX UI Elements",
  id: 1,
  timezone: "Europe/Paris",
  timeFormat: "dddd, MMMM Do YYYY, hh:mm"
}];
const user = {
  firstname: "John",
  lastname: "Doe",
  email: "john.doe@domain.com",
  role: "Executive_Admin",
  type: "Global"
};
const createHandleMenuClick = item => {
  console.log("clicked " + item);
};
const TopMenu = props => {
  const [site, setSite] = useState(sites[0]);
  return _jsx(Container, {
    children: _jsxs(HeadBar, {
      children: [_jsxs(Row, {
        children: [_jsx(LogoWrapper, {
          children: _jsx("img", {
            style: {
              height: 40
            },
            alt: 'logo',
            src: logo
          })
        }), _jsx(SiteSelector, {
          sites: sites,
          currentSite: site,
          onChange: newSite => {
            setSite(sites.find(site => site.id === newSite.name));
          },
          backgroundColor: Palette.NIGHT_RIDER
        })]
      }), _jsxs(Row, {
        children: [_jsx(Input, {
          placeholder: "Find a car...",
          width: 250,
          iconComponent: _jsx(SearchIcon, {}),
          onChange: e => console.log(e.target.value)
        }), _jsx(ProfileButton, {
          user: user,
          handleProfileSettingsClick: () => createHandleMenuClick("Profile Settings"),
          handleOnboardingTourClick: () => createHandleMenuClick("Onboarding tour"),
          toggleFullScreen: () => createHandleMenuClick("Fullscreen mode"),
          handleSignOutClick: () => createHandleMenuClick("Sign out")
        })]
      })]
    })
  });
};
export default TopMenu;