Added toast notifications

package-lock.json

@@ -13,7 +13,8 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.1.3",
-        "react-router-dom": "^6.18.0"
+        "react-router-dom": "^6.18.0",
+        "react-toastify": "^9.1.3"
       },
       "devDependencies": {
         "@types/react": "^18.2.15",
@@ -1496,6 +1497,14 @@
         "node": ">=4"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -2732,6 +2741,18 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-toastify": {
+      "version": "9.1.3",
+      "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz",
+      "integrity": "sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==",
+      "dependencies": {
+        "clsx": "^1.1.1"
+      },
+      "peerDependencies": {
+        "react": ">=16",
+        "react-dom": ">=16"
+      }
+    },
     "node_modules/redux": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",

package.json

@@ -15,7 +15,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
-    "react-router-dom": "^6.18.0"
+    "react-router-dom": "^6.18.0",
+    "react-toastify": "^9.1.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.tsx

@@ -4,9 +4,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { Provider } from "react-redux";
 import "./App.css";
 import store from "./Components/Plugins/Redux/Store/Store";
-
 const queryClient = new QueryClient();
-
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 const router = createHashRouter([
   {
     path: "/",
@@ -21,6 +21,15 @@ export default function App() {
       <QueryClientProvider client={queryClient}>
         <RouterProvider router={router} />
       </QueryClientProvider>
+      <ToastContainer
+        autoClose={1500}
+        position="bottom-center"
+        closeOnClick
+        pauseOnHover
+        draggable
+        theme={"light"}
+        limit={3}
+      />
     </Provider>
   );
 }

src/Components/Buttons/Button.tsx

@@ -13,10 +13,10 @@ export default function Button(props: props) {
   return (
     <div>
       <button
+        onClick={props.onClick}
         onMouseDown={() => {
           if (!clicked) {
-            props.onClick;
-            setClicked(true);
+            setClicked(!clicked);
           }
         }}
         onMouseUp={() => setClicked(false)}

src/Pages/LandingPage/LandingPage.tsx

@@ -1,6 +1,7 @@
 import Button from "../../Components/Buttons/Button";
 import styles from "../../Components/styles";
 import citc_logo from "../../assets/citc_logo.jpg";
+import { toast } from "react-toastify";
 export default function LandingPage() {
   return (
     <div style={styles.background}>
@@ -45,13 +46,24 @@ export default function LandingPage() {
               TRACKER
             </p>
             <div style={{ ...styles.flex_column }}>
-              <Button type={"light"} label={"Login"} onClick={() => {}} />
-              <Button type={"dark"} label={"Register"} onClick={() => {}} />
+              <Button
+                type={"light"}
+                label={"Login"}
+                onClick={() => {
+                  toast("Successfully logged in!");
+                }}
+              />
+              <Button
+                type={"dark"}
+                label={"Register"}
+                onClick={() => {
+                  toast("Redirecting!");
+                }}
+              />
             </div>
           </div>
         </div>
       </div>
-      <p>heh</p>
     </div>
   );
 }