Added a tab view.

src/resultsview.js

@@ -5,6 +5,9 @@ import Box from '@material-ui/core/Box';
 import ImportContactsIcon from '@material-ui/icons/ImportContacts';
 import Button from '@material-ui/core/Button';
 import LabelIcon from '@material-ui/icons/Label';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
 
 import { GridGallery } from './gridgallery.js';
 
@@ -90,21 +93,57 @@ export function ImagesView(props) {
     return <GridGallery {...props} />;
 }
 
+function TabPanel(props) {
+    const { children, activeIndex, myIndex } = props;
+
+    return (
+        <>
+            {activeIndex === myIndex && <Box>{children}</Box>}
+        </>
+    );
+}
+
 export function ResultsView(props) {
     const classes = useStyles();
     const { photos, albums, tags } = props;
+    const [ activeIndex, setActiveIndex ] = React.useState(0);
+
+    var _ = require('lodash');
+
+    function tabProps(index) {
+        return {
+            id: _.uniqueId("tab_"),
+        };
+    }
+
+    const handleChange = (e, newindex) => {
+        setActiveIndex(newindex);
+    }
 
     return (
-        <Box className={classes.root}>
+        <div className={classes.root}>
-            <Box className={classes.root}>
+            <AppBar position="static">
-                <ImagesView className={classes.root} photos={photos} />
+                <Tabs value={activeIndex} onChange={handleChange}>
-            </Box>
+                    <Tab label="Images" {...tabProps(0)} />
-            <Box className={classes.root}>
+                    <Tab label="Albums" {...tabProps(1)} />
-                <AlbumsView className={classes.root} albums={albums} />
+                    <Tab label="Tags" {...tabProps(2)} />
-            </Box>
+                </Tabs>
-            <Box className={classes.root}>
+            </AppBar>
-                <TagsView className={classes.root} tags={tags} />
+            <TabPanel activeIndex={activeIndex} myIndex={0}>
-            </Box>
+                <Box className={classes.root}>
-        </Box>
+                    <ImagesView className={classes.root} photos={photos} />
-    )
+                </Box>
+            </TabPanel>
+            <TabPanel activeIndex={activeIndex} myIndex={1}>
+                <Box className={classes.root}>
+                    <AlbumsView className={classes.root} albums={albums} />
+                </Box>
+            </TabPanel>
+            <TabPanel activeIndex={activeIndex} myIndex={2}>
+                <Box className={classes.root}>
+                    <TagsView className={classes.root} tags={tags} />
+                </Box>
+            </TabPanel>
+        </div>
+    );
 }