fix: #1494 Port AdminButton from gatsby to next.js

src/frontend/next/package.json

@@ -8,6 +8,8 @@
     "start": "next start"
   },
   "dependencies": {
+    "@material-ui/core": "^4.11.2",
+    "@material-ui/icons": "^4.11.2",
     "next": "^10.0.2",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"

src/frontend/next/src/components/AdminButtons/AdminButtons.tsx

@@ -0,0 +1,40 @@
+import { useContext } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import { IconButton } from '@material-ui/core';
+import FlagIcon from '@material-ui/icons/Flag';
+import DeleteIcon from '@material-ui/icons/Delete';
+import { UserStateContext } from '../../contexts/User/UserContext';
+
+const useStyles = makeStyles(() => ({
+  iconDiv: {
+    float: 'right',
+  },
+  iconSpan: {
+    paddingLeft: '10px',
+    paddingRight: '10px',
+  },
+}));
+
+function AdminButtons() {
+  const classes = useStyles();
+  const user = useContext(UserStateContext);
+
+  return (
+    user.isAdmin && (
+      <div className={classes.iconDiv}>
+        <span className={classes.iconSpan}>
+          <IconButton size="small">
+            <FlagIcon fontSize="large" />
+          </IconButton>
+        </span>
+        <span className={classes.iconSpan}>
+          <IconButton size="small">
+            <DeleteIcon fontSize="large" />
+          </IconButton>
+        </span>
+      </div>
+    )
+  );
+}
+
+export default AdminButtons;

src/frontend/next/src/contexts/User/UserContext/index.js

@@ -0,0 +1,4 @@
+import { createContext } from 'react';
+
+export const UserStateContext = createContext();
+export const UserDispatchContext = createContext();