From 25591729fc95e7970132abf922cb4758522a4cbc Mon Sep 17 00:00:00 2001
From: tonyvugithub <55034244+tonyvugithub@users.noreply.github.com>
Date: Sun, 17 Jan 2021 20:13:33 -0500
Subject: [PATCH] Ported SnackBar component

---
 src/frontend/next/package.json                |  1 +
 .../next/src/components/SnackBar/SnackBar.tsx | 40 +++++++++++++++++++
 .../next/src/components/SnackBar/index.ts     |  3 ++
 3 files changed, 44 insertions(+)
 create mode 100644 src/frontend/next/src/components/SnackBar/SnackBar.tsx
 create mode 100644 src/frontend/next/src/components/SnackBar/index.ts

diff --git a/src/frontend/next/package.json b/src/frontend/next/package.json
index fad513b151..fca76fe5cb 100644
--- a/src/frontend/next/package.json
+++ b/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"
diff --git a/src/frontend/next/src/components/SnackBar/SnackBar.tsx b/src/frontend/next/src/components/SnackBar/SnackBar.tsx
new file mode 100644
index 0000000000..2b5e6eca3c
--- /dev/null
+++ b/src/frontend/next/src/components/SnackBar/SnackBar.tsx
@@ -0,0 +1,40 @@
+import { FC, 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: FC<SnackbarProps> = (props) => {
+  const { message } = props;
+  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;
diff --git a/src/frontend/next/src/components/SnackBar/index.ts b/src/frontend/next/src/components/SnackBar/index.ts
new file mode 100644
index 0000000000..6b7fdb1366
--- /dev/null
+++ b/src/frontend/next/src/components/SnackBar/index.ts
@@ -0,0 +1,3 @@
+import CustomizedSnackBar from './SnackBar';
+
+export default CustomizedSnackBar;