@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 translations = {
  "en": {
    version: "Current version",
    profile: "Profile settings",
    onboarding: "Onboarding tour",
    fullscreen: "Full screen mode",
    language: "Select language",
    signOut: "Sign out"
  },
  es: {
    version: "Version",
    profile: "Configuración de usuario",
    onboarding: "Tour de bienvenida",
    fullscreen: "Pantalla completa",
    language: "Seleccionar idioma",
    signOut: "Cerrar sesión"
  },
  pl: {
    version: "Wersja",
    profile: "Ustawienia profilu",
    onboarding: "Wycieczka powitalna",
    fullscreen: "Pełny ekran",
    language: "Wybierz język",
    signOut: "Wyloguj się"
  },
  "fr": {
    "version": "Version actuelle",
    "profile": "Paramètres de profil",
    "onboarding": "Visite guidée",
    "fullscreen": "Mode plein écran",
    "language": "Sélectionner la langue",
    "signOut": "Se déconnecter"
  },
  "ru": {
    "version": "Текущая версия",
    "profile": "Настройки профиля",
    "onboarding": "Тур по приложению",
    "fullscreen": "Режим полного экрана",
    "language": "Выбрать язык",
    "signOut": "Выйти"
  },
  "ar": {
    "version": "الإصدار الحالي",
    "profile": "إعدادات الملف الشخصي",
    "onboarding": "جولة التعريف",
    "fullscreen": "وضع الشاشة الكاملة",
    "language": "اختر اللغة",
    "signOut": "تسجيل الخروج"
  },
  "zh-CN": {
    "version": "当前版本",
    "profile": "个人资料设置",
    "onboarding": "引导教程",
    "fullscreen": "全屏模式",
    "language": "选择语言",
    "signOut": "退出登录"
  },
  "ja": {
    "version": "現在バージョン",
    "profile": "プロフィール設定",
    "onboarding": "オンボーディングツアー",
    "fullscreen": "フルスクリーンモード",
    "language": "言語選択",
    "signOut": "ログアウト"
  },
  "il": {
    version: "גרסה נוכחית",
    profile: "הגדרות פרופיל",
    onboarding: "סיור הקלטה",
    fullscreen: "מצב מסך מלא",
    language: "בחר שפה",
    signOut: "התנתק"
  }
};
const languages = [{
  name: "Global English",
  flagCode: "global",
  id: "en",
  isDefault: true
}, {
  name: "Español",
  flagCode: "es",
  id: "es"
}, {
  name: "Polski",
  flagCode: "pl",
  id: "pl"
}, {
  name: "Français",
  flagCode: "fr",
  id: "fr"
}, {
  name: "Русский",
  flagCode: "ru",
  id: 'ru'
}, {
  name: "日本語",
  flagCode: "jp",
  id: "ja"
}, {
  name: "普通话",
  flagCode: "cn",
  id: "zh-CN"
}, {
  name: "Portugues",
  flagCode: "pt",
  id: "pt"
}, {
  name: "עִברִית",
  flagCode: "il",
  id: "il"
}, {
  name: "عربي",
  flagCode: "sa",
  id: "ar"
}];
const TopMenu = props => {
  const [site, setSite] = useState(sites[0]);
  const [currentLanguage, setCurrentLanguage] = useState("en");
  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, {
          translations: translations[currentLanguage],
          availableLanguages: languages,
          user: user,
          handleProfileSettingsClick: () => createHandleMenuClick("Profile Settings"),
          handleOnboardingTourClick: () => createHandleMenuClick("Onboarding tour"),
          toggleFullScreen: () => createHandleMenuClick("Fullscreen mode"),
          handleSignOutClick: () => createHandleMenuClick("Sign out"),
          version: "v 1.3.12",
          selectedLanguage: currentLanguage,
          onChangeLanguage: newLanguage => setCurrentLanguage(newLanguage)
        })]
      })]
    })
  });
};
export default TopMenu;