29 add toast component that instructs user to allow location services

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);
+}

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 ? (
+		<div className="toast toast-top toast-end">
+			<div className="alert alert-info">
+				<div>
+					<span>{toastMessage}</span>
+				</div>
+			</div>
+		</div>
+	) : (
+		<></>
+	)
+}

front-end/src/containers/App/App.jsx

@@ -8,6 +8,7 @@ import FeedPage from '../../routes/feed/FeedPage'
 import BottomNav from '../../components/BottomNav/BottomNav'
 import UploadPage from '../../routes/upload/UploadPage'
 import StoopMapPage from '../../routes/map/[id]/StoopMapPage'
+import Toast from '../../components/Toast/Toast'
 import { MapProvider } from '../../context/map'
 
 const App = () => {
@@ -26,6 +27,10 @@ const App = () => {
 			}}
 		>
 			<div className="app">
+				<Toast
+					show={error}
+					toastMessage="Please Allow Location Services"
+				/>
 				<main>
 					<Routes>
 						<Route