Merge pull request #14 from Nez27/feat/add-toast

Implement toast to project

hotel-management/package.json

@@ -30,6 +30,7 @@
     "@emotion/is-prop-valid": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.17.0",
     "styled-components": "^6.1.0"

hotel-management/pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-hot-toast:
+    specifier: ^2.4.1
+    version: 2.4.1(csstype@3.1.2)(react-dom@18.2.0)(react@18.2.0)
   react-icons:
     specifier: ^4.11.0
     version: 4.11.0(react@18.2.0)
@@ -1400,6 +1403,14 @@ packages:
       slash: 3.0.0
     dev: true
 
+  /goober@2.1.13(csstype@3.1.2):
+    resolution: {integrity: sha512-jFj3BQeleOoy7t93E9rZ2de+ScC4lQICLwiAQmKMg9F6roKGaLSHoCDYKkWlSafg138jejvq/mTdvmnwDQgqoQ==}
+    peerDependencies:
+      csstype: ^3.0.10
+    dependencies:
+      csstype: 3.1.2
+    dev: false
+
   /graphemer@1.4.0:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
     dev: true
@@ -1804,6 +1815,20 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-hot-toast@2.4.1(csstype@3.1.2)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-j8z+cQbWIM5LY37pR6uZR6D4LfseplqnuAO4co4u8917hBUvXlEqyP1ZzqVLcqoyUesZZv/ImreoCeHVDpE5pQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: '>=16'
+      react-dom: '>=16'
+    dependencies:
+      goober: 2.1.13(csstype@3.1.2)
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    transitivePeerDependencies:
+      - csstype
+    dev: false
+
   /react-icons@4.11.0(react@18.2.0):
     resolution: {integrity: sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==}
     peerDependencies:

hotel-management/src/App.tsx

@@ -11,6 +11,7 @@ import NotFound from './pages/NotFound';
 
 // Constants
 import * as PATH from './constants/path';
+import Toast from './components/Toast';
 
 function App() {
   return (
@@ -28,6 +29,8 @@ function App() {
           </Routes>
         </BrowserRouter>
       </StyleSheetManager>
+
+      <Toast />
     </>
   );
 }

hotel-management/src/components/Toast.tsx

@@ -0,0 +1,26 @@
+import { Toaster } from 'react-hot-toast';
+
+const Toast = () => {
+  return (
+    <Toaster
+      position="top-center"
+      gutter={12}
+      containerStyle={{ margin: '8px', zIndex: 1 }}
+      toastOptions={{
+        success: {
+          duration: 3000,
+        },
+        error: {
+          duration: 5000,
+        },
+        style: {
+          fontSize: '16px',
+          maxWidth: '500px',
+          padding: '16px 24px',
+        },
+      }}
+    />
+  );
+};
+
+export default Toast;