import React from "react"; import { Typography, FormControl, InputLabel, Select, MenuItem, AppBar, Toolbar, } from "@material-ui/core"; import langUtil from "../../modules/lang/lang-util"; const Header = ({ user, onLanguageSelect, lang, langCode, classes }) => { const handleLanguageChange = (e) => { onLanguageSelect(e.target.value); }; const renderLanguageSelector = () => { const supportedLanguages = langUtil.getSupportedLanguages(lang); return ( <div> <InputLabel shrink>Language:</InputLabel> <FormControl style={{ width: "100%", }} size="small" > <Select value={langCode} onChange={handleLanguageChange}> {supportedLanguages.map((s, index) => ( <MenuItem key={index} value={s.value}> <Typography>{s.label}</Typography> </MenuItem> ))} </Select> </FormControl> </div> ); }; // <img src="/Flag.png" style={{ verticalAlign: 'middle', marginRight: 10 }} alt="flag"/> return ( <AppBar position="static" style={{ color: "white", backgroundColor: "#0040B7", justifyContent: "middle", }} > <Toolbar variant="dense"> <Typography variant="h6" style={{ flexGrow: 1 }}> {lang.t("headerTitle")} </Typography> {renderLanguageSelector()} </Toolbar> </AppBar> ); }; export default Header;