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);