diff --git a/front-end/src/components/Toast/Toast.css b/front-end/src/components/Toast/Toast.css new file mode 100644 index 0000000..2bfd65f --- /dev/null +++ b/front-end/src/components/Toast/Toast.css @@ -0,0 +1,9 @@ +.toast { + background-color: --info; + padding-top: 5rem; + z-index: 1000; +} + +.toast.show { + transform: translateX(0px); +} diff --git a/front-end/src/components/Toast/Toast.jsx b/front-end/src/components/Toast/Toast.jsx new file mode 100644 index 0000000..76bf006 --- /dev/null +++ b/front-end/src/components/Toast/Toast.jsx @@ -0,0 +1,33 @@ +import './Toast.css' +// import { useState } from 'react' + +export default function Toast({ + show = true, + toastMessage = 'Verify Location' +}) { + // TODO: make self contained + // Toast component will have to be useState'd in separate file + // const [show, setShow] = useState(false) + // const [toastMessage, setToastMessage] = useState(false) + // useImperativeHandle(ref, () => ({ + // showToast(msg = '') { + // setShow(true) + // setToastMessage(msg) + // setTimeout(() => { + // setShow(false) + // }, timeout) + // } + // })) + + return show ? ( +