restructure files

twistter-frontend/src/components/layout/NavBar.js

@@ -0,0 +1,31 @@
+/* eslint-disable */
+import React, { Component } from 'react';
+import { Link } from 'react-router-dom';
+import AppBar from '@material-ui/core/AppBar';
+import ToolBar from '@material-ui/core/Toolbar';
+import Button from '@material-ui/core/Button';
+
+export class Navbar extends Component {
+    render() {
+        return (
+            <AppBar>
+                <ToolBar>
+                    <Button component={ Link } to='/user'>
+                        User
+                    </Button>
+                    <Button component={ Link } to='/login'>
+                        Login
+                    </Button>
+                    <Button component={ Link } to='/register'>
+                        Register
+                    </Button>
+                    <Button component={ Link } to='/'>
+                        Home
+                    </Button>
+                </ToolBar>
+            </AppBar>
+        )
+    }
+}
+
+export default Navbar;

twistter-frontend/src/components/topic/ChipsArray.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Chip from '@material-ui/core/Chip';
+import Paper from '@material-ui/core/Paper';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+    padding: theme.spacing(0.5),
+  },
+  chip: {
+    margin: theme.spacing(0.5),
+  },
+}));
+
+export default function ChipsArray() {
+  const classes = useStyles();
+  const [chipData, setChipData] = React.useState([
+    { key: 0, label: 'Angular' },
+    { key: 1, label: 'jQuery' },
+    { key: 2, label: 'Polymer' },
+    { key: 3, label: 'React' },
+    { key: 4, label: 'Vue.js' },
+  ]);
+
+  const handleDelete = chipToDelete => () => {
+    if (chipToDelete.label === 'React') {
+      alert('Why would you want to delete React?! :)');
+      return;
+    }
+
+    setChipData(chips => chips.filter(chip => chip.key !== chipToDelete.key));
+  };
+
+  return (
+    <Paper className={classes.root}>
+      {chipData.map(data => {
+
+        return (
+          <Chip
+            key={data.key}
+            label={data.label}
+            onDelete={handleDelete(data)}
+            className={classes.chip}
+          />
+        );
+      })}
+    </Paper>
+  );
+}