Ported SnackBar component

src/frontend/next/package.json

@@ -9,6 +9,7 @@
   },
   "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/SnackBar/SnackBar.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import Snackbar from '@material-ui/core/Snackbar';
+import IconButton from '@material-ui/core/IconButton';
+import CloseIcon from '@material-ui/icons/Close';
+
+type SnackbarProps = {
+  message: string;
+};
+
+const SimpleSnackbar = ({ message }: SnackbarProps) => {
+  const [open, setOpen] = useState<boolean>(true);
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <div>
+      <Snackbar
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'center',
+        }}
+        open={open}
+        autoHideDuration={6000}
+        message={message}
+        action={
+          <>
+            <IconButton size="small" aria-label="close" color="inherit" onClick={handleClose}>
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </>
+        }
+      />
+    </div>
+  );
+};
+
+export default SimpleSnackbar;