File tree Expand file tree Collapse file tree 8 files changed +157
-4
lines changed
Expand file tree Collapse file tree 8 files changed +157
-4
lines changed Original file line number Diff line number Diff line change 2020 "react-dom" : " ^19.1.1" ,
2121 "react-leaflet" : " ^5.0.0" ,
2222 "react-router-dom" : " ^7.9.2" ,
23+ "react-toastify" : " ^11.0.5" ,
2324 "tailwindcss" : " ^4.1.13"
2425 },
2526 "devDependencies" : {
Original file line number Diff line number Diff line change 11import { Route , Routes } from "react-router-dom" ;
2+ import { ToastContainer } from 'react-toastify' ;
3+ import 'react-toastify/dist/ReactToastify.css' ;
24import Nav from "./components/Nav" ;
35import Background from "./components/Background" ;
46import NewRequestForm from "./components/new-request/new-request-form.tsx" ;
@@ -23,6 +25,7 @@ function App() {
2325 <Route path="/login" element={<Login />} /> */ }
2426 { < Route path = "/new-request" element = { < NewRequestForm /> } /> }
2527 </ Routes >
28+ < ToastContainer />
2629 </ >
2730 ) ;
2831}
Original file line number Diff line number Diff line change 1+ import { toast , type ToastOptions } from "react-toastify" ;
2+
3+ const baseToastConfig : ToastOptions = {
4+ position : "top-right" ,
5+ autoClose : 4900 ,
6+ hideProgressBar : false ,
7+ closeOnClick : true ,
8+ pauseOnHover : true ,
9+ draggable : true ,
10+ progress : undefined ,
11+ theme : "dark" ,
12+ } ;
13+
14+ /**
15+ * Displays a success toast notification.
16+ * Uses Tailwind classes directly for styling.
17+ */
18+ export const success = ( message : string ) : void => {
19+ toast . success ( message , {
20+ ...baseToastConfig ,
21+ className :
22+ "bg-black/75 border border-green-500 text-green-100 rounded-md shadow-md text-sm font-medium" ,
23+ progressClassName : "bg-green-500" ,
24+ } ) ;
25+ } ;
26+
27+ /**
28+ * Displays an error toast notification.
29+ * Uses Tailwind classes directly for styling.
30+ */
31+ export const error = ( message : string ) : void => {
32+ toast . error ( message , {
33+ ...baseToastConfig ,
34+ className :
35+ "bg-black/75 border border-red-500 text-red-100 rounded-md shadow-md text-sm font-medium" ,
36+ progressClassName : "bg-red-500" ,
37+ } ) ;
38+ } ;
39+
40+ const toastService = {
41+ success,
42+ error,
43+ } ;
44+
45+ export default toastService ;
Original file line number Diff line number Diff line change 2222 "@radix-ui/react-separator" : " ^1.1.7" ,
2323 "@radix-ui/react-slot" : " ^1.2.3" ,
2424 "@tailwindcss/vite" : " ^4.1.13" ,
25+ "@tanstack/react-table" : " ^8.21.3" ,
2526 "class-variance-authority" : " ^0.7.1" ,
2627 "clsx" : " ^2.1.1" ,
2728 "lucide-react" : " ^0.544.0" ,
28- "@tanstack/react-table" : " ^8.21.3" ,
2929 "react" : " ^19.1.1" ,
3030 "react-dom" : " ^19.1.1" ,
3131 "react-router-dom" : " ^7.8.2" ,
32+ "react-toastify" : " ^11.0.5" ,
3233 "tailwind-merge" : " ^3.3.1" ,
3334 "tailwindcss" : " ^4.1.13"
3435 },
Original file line number Diff line number Diff line change 11import { Routes , Route } from "react-router-dom" ;
2+ import { ToastContainer } from 'react-toastify' ;
3+ import 'react-toastify/dist/ReactToastify.css' ;
24import Nav from "./components/Nav" ;
35import Background from "./components/Background" ;
46import Commands from "./pages/Command/Commands" ;
@@ -23,6 +25,7 @@ function App() {
2325 < Route path = "/aro-requests" element = { < LiveSession /> } />
2426 < Route path = "/login" element = { < Login /> } />
2527 </ Routes >
28+ < ToastContainer />
2629 </ >
2730 ) ;
2831}
Original file line number Diff line number Diff line change 1+ import { toast , type ToastOptions } from "react-toastify" ;
2+
3+ const baseToastConfig : ToastOptions = {
4+ position : "top-right" ,
5+ autoClose : 4900 ,
6+ hideProgressBar : false ,
7+ closeOnClick : true ,
8+ pauseOnHover : true ,
9+ draggable : true ,
10+ progress : undefined ,
11+ theme : "dark" ,
12+ } ;
13+
14+ /**
15+ * Displays a success toast notification.
16+ * Uses Tailwind classes directly for styling.
17+ */
18+ export const success = ( message : string ) : void => {
19+ toast . success ( message , {
20+ ...baseToastConfig ,
21+ className :
22+ "bg-black/75 border border-green-500 text-green-100 rounded-md shadow-md text-sm font-medium" ,
23+ progressClassName : "bg-green-500" ,
24+ } ) ;
25+ } ;
26+
27+ /**
28+ * Displays an error toast notification.
29+ * Uses Tailwind classes directly for styling.
30+ */
31+ export const error = ( message : string ) : void => {
32+ toast . error ( message , {
33+ ...baseToastConfig ,
34+ className :
35+ "bg-black/75 border border-red-500 text-red-100 rounded-md shadow-md text-sm font-medium" ,
36+ progressClassName : "bg-red-500" ,
37+ } ) ;
38+ } ;
39+
40+ const toastService = {
41+ success,
42+ error,
43+ } ;
44+
45+ export default toastService ;
You can’t perform that action at this time.
0 commit comments