Merge pull request #4 from adnanbwp/add-item-count-to-toast

show item count in toast
adnanbwp · Jun 27, 2024 · c464c5b · c464c5b
2 parents 555ac7d + 198025b
commit c464c5b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -25,7 +25,7 @@ function App() {
     setItems(newItems);
     saveItems(newItems);
     setSelectedItem(null);
-    showToast('Items loaded successfully');
+    showToast('Items loaded successfully', 'success', newItems.length);
   };
 
   const handleSpinComplete = (item) => {

diff --git a/src/components/Toast.jsx b/src/components/Toast.jsx
@@ -1,7 +1,6 @@
-// src/components/Toast.jsx
 import React, { useEffect } from 'react';
 
-const Toast = ({ message, type, onClose }) => {
+const Toast = ({ message, type, onClose, itemCount }) => {
   useEffect(() => {
     const timer = setTimeout(() => {
       onClose();
@@ -14,9 +13,14 @@ const Toast = ({ message, type, onClose }) => {
 
   return (
     <div className={`fixed bottom-4 right-4 ${bgColor} text-white px-4 py-2 rounded shadow-lg`}>
-      {message}
+      <div>{message}</div>
+      {itemCount !== undefined && (
+        <div className="text-sm mt-1">
+          {itemCount} item{itemCount !== 1 ? 's' : ''} loaded
+        </div>
+      )}
     </div>
   );
 };
 
-export default Toast;
+export default Toast;