From 931f671dedbd44c94deef1923f127c9cf1053754 Mon Sep 17 00:00:00 2001
From: Aayush <aayushk4980@gmail.com>
Date: Tue, 12 Nov 2024 18:14:52 +0530
Subject: [PATCH] Added toast animation

---
 src/components/toaster/Toast.jsx | 5 ++++-
 tailwind.config.js               | 7 ++++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/toaster/Toast.jsx b/src/components/toaster/Toast.jsx
index 5aea34c..29a42df 100644
--- 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
index 87bcef1..cbe4bc2 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -20,6 +20,10 @@ export default {
         'in': {
           '0%': { transform: 'translateX(100%)', opacity: '0' },
           '100%': { transform: 'translateX(0)', opacity: '1' }
+        },
+        'toast': {
+          '0%': { width: '100%' },
+          '100%': { width: '0%' }
         }
       },
 
@@ -27,7 +31,8 @@ export default {
         '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'
       }
     },
   },