@@ -2,20 +2,43 @@ import React, { useState } from "react";
22import GotoHome from "../../Components/GoToHome" ;
33
44const Toster = ( ) => {
5- const [ showToster , setShowToster ] = useState ( false )
6- console . log ( "showToster" , showToster )
5+ const [ toasts , setToasts ] = useState ( [ ] ) ;
6+ 77 const handleClick = ( ) => {
8- setShowToster ( true )
8+ const newToast = { id : Date . now ( ) , visible : true } ;
9+ setToasts ( ( prevToasts ) => [ newToast , ...prevToasts ] ) ;
10+ 11+ setTimeout ( ( ) => {
12+ removeToast ( newToast . id ) ;
13+ } , 6000 ) ;
914 } ;
10- setTimeout ( ( ) => {
11- setShowToster ( false )
12- console . log ( "I am also running" )
13- } , 6000 ) ;
15+ 16+ const removeToast = ( id ) => {
17+ setToasts ( ( prevToasts ) =>
18+ prevToasts . map ( ( toast ) =>
19+ toast . id === id ? { ...toast , visible : false } : toast
20+ )
21+ ) ;
22+ setTimeout ( ( ) => {
23+ setToasts ( ( prevToasts ) => prevToasts . filter ( ( toast ) => toast . id !== id ) ) ;
24+ } , 500 ) ;
25+ } ;
26+ 1427 return (
1528 < div className = "h-screen flex justify-center items-center flex-col gap-8" >
16- { showToster && < div className = "z-1000 absolute top-10 right-10" > < TosterBox setShowToster = "fasle" /> </ div > }
29+ { toasts . map ( ( toast , index ) => (
30+ < div
31+ key = { toast . id }
32+ className = { `z-1000 absolute right-10 transition-all duration-500 ${
33+ toast . visible ? "opacity-100 translate-x-0" : "opacity-0 translate-x-full"
34+ } `}
35+ style = { { top : `${ 10 + index * 60 } } }
36+ >
37+ < TosterBox onClose = { ( ) => removeToast ( toast . id ) } />
38+ </ div >
39+ ) ) }
1740 < button
18- className = "cursor-pointer border-black border px-10 py-3 hover:bg-gray-100"
41+ className = "cursor-pointer border-black border px-10 py-3 hover:bg-gray-100"
1942 onClick = { handleClick }
2043 >
2144 Click To Show Toster
@@ -27,17 +50,15 @@ const Toster = () => {
2750
2851export default Toster ;
2952
30- const TosterBox = ( setShowToster ) => {
31- console . log ( setShowToster , "======" )
32- const handleClose = ( ) => {
33- setShowToster = "false"
34- }
53+ const TosterBox = ( { onClose } ) => {
3554 return (
36- < div className = " items-center bg-red-400 " >
37- < div className = "flex px-10 py-4 gap-10" >
38- < h1 className = "text-white " > This is a Toster Box after click </ h1 >
39- < h1 className = "text-white" onClick = { handleClose } > x</ h1 >
40- </ div >
55+ < div className = "bg-red-400 rounded shadow-lg" >
56+ < div className = "flex justify-between px-10 py-4 gap-10" >
57+ < h1 className = "text-white" > This is a Toster Box after click</ h1 >
58+ < button className = "text-white" onClick = { onClose } >
59+ x
60+ </ button >
61+ </ div >
4162 </ div >
4263 ) ;
4364} ;
0 commit comments