diff options
Diffstat (limited to 'src/tools/emcoui/src/appbase/Content.js')
-rw-r--r-- | src/tools/emcoui/src/appbase/Content.js | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/src/tools/emcoui/src/appbase/Content.js b/src/tools/emcoui/src/appbase/Content.js new file mode 100644 index 00000000..2c907acb --- /dev/null +++ b/src/tools/emcoui/src/appbase/Content.js @@ -0,0 +1,109 @@ +//======================================================================= +// Copyright (c) 2017-2020 Aarna Networks, Inc. +// All rights reserved. +// ====================================================================== +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// http://www.apache.org/licenses/LICENSE-2.0 +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// ======================================================================== +import React from "react"; +import PropTypes from "prop-types"; +import AppBar from "@material-ui/core/AppBar"; +import Toolbar from "@material-ui/core/Toolbar"; +import Typography from "@material-ui/core/Typography"; +import Paper from "@material-ui/core/Paper"; +import Grid from "@material-ui/core/Grid"; +import Button from "@material-ui/core/Button"; +import TextField from "@material-ui/core/TextField"; +import Tooltip from "@material-ui/core/Tooltip"; +import IconButton from "@material-ui/core/IconButton"; +import { withStyles } from "@material-ui/core/styles"; +import SearchIcon from "@material-ui/icons/Search"; +import RefreshIcon from "@material-ui/icons/Refresh"; + +const styles = (theme) => ({ + paper: { + maxWidth: 936, + margin: "auto", + overflow: "hidden", + }, + searchBar: { + borderBottom: "1px solid rgba(0, 0, 0, 0.12)", + }, + searchInput: { + fontSize: theme.typography.fontSize, + }, + block: { + display: "block", + }, + addUser: { + marginRight: theme.spacing(1), + }, + contentWrapper: { + margin: "40px 16px", + }, +}); + +function Content(props) { + const { classes } = props; + + return ( + <Paper className={classes.paper}> + <AppBar + className={classes.searchBar} + position="static" + color="default" + elevation={0} + > + <Toolbar> + <Grid container spacing={2} alignItems="center"> + <Grid item> + <SearchIcon className={classes.block} color="inherit" /> + </Grid> + <Grid item xs> + <TextField + fullWidth + placeholder="Search by composite app name" + InputProps={{ + disableUnderline: true, + className: classes.searchInput, + }} + /> + </Grid> + <Grid item> + <Button + variant="contained" + color="primary" + className={classes.addUser} + > + Create + </Button> + <Tooltip title="Reload"> + <IconButton> + <RefreshIcon className={classes.block} color="inherit" /> + </IconButton> + </Tooltip> + </Grid> + </Grid> + </Toolbar> + </AppBar> + <div className={classes.contentWrapper}> + <Typography color="textSecondary" align="center"> + No composite apps for this project yet + </Typography> + </div> + </Paper> + ); +} + +Content.propTypes = { + classes: PropTypes.object.isRequired, +}; + +export default withStyles(styles)(Content); |