Added toast animation

Aayush259 · Nov 12, 2024 · 931f671 · 931f671
1 parent 1d20c6f
commit 931f671
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/src/components/toaster/Toast.jsx b/src/components/toaster/Toast.jsx
@@ -10,7 +10,10 @@ const Toast = ({ message, onClose, success }) => {
     }, [])
 
     return (
-        <div className="bg-slate-800 max-w-[80vw] min-w-[350px] p-3 md:py-4 md:px-8 text-center text-white flex justify-between items-center rounded-xl m-2 md:text-xl overflow-ellipsis animate-in">
+        <div className="bg-slate-800 max-w-[80vw] min-w-[350px] p-3 md:py-4 md:px-8 text-center text-white flex justify-between items-center rounded-xl m-2 md:text-xl overflow-ellipsis animate-in relative overflow-hidden">
+            <div
+            className={`absolute h-1 left-0 bottom-0 ${success ? 'bg-green-500' : 'bg-red-500'} animate-toast`}
+            />
             <div className="flex items-center justify-start gap-2">
                 {
                     success ? <FontAwesomeIcon icon="fa-solid fa-check" className="text-green-500" /> : <FontAwesomeIcon icon="fa-solid fa-xmark" className="text-red-500" />

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -20,14 +20,19 @@ export default {
         'in': {
           '0%': { transform: 'translateX(100%)', opacity: '0' },
           '100%': { transform: 'translateX(0)', opacity: '1' }
+        },
+        'toast': {
+          '0%': { width: '100%' },
+          '100%': { width: '0%' }
         }
       },
 
       animation: {
         'load-1': 'loading 1s ease-in-out infinite',
         'load-2': 'loading 1s ease-in-out 0.2s infinite',
         'load-3': 'loading 1s ease-in-out 0.4s infinite',
-        'in': 'in 0.2s ease-in-out'
+        'in': 'in 0.2s ease-in-out',
+        'toast': 'toast 4s linear forwards'
       }
     },
   },