add My toaster

Author: sameerkali

src/All Assessment/assessment21/MyToaster.jsx

@@ -0,0 +1,58 @@
+import React from "react";
+
+const MyToaster = () => {
+  const [toast, setToast] = React.useState([]);
+  console.log("toast:", toast);
+
+  const handleClick = () => {
+    const newToast = { id: Date.now() };
+    setToast(prev => [...prev, newToast]);
+    setTimeout(() => {
+      removeToast(newToast.id);
+    }, 6000);
+  };
+
+  const removeToast = id => {
+    setToast(prev => prev.filter(t => t.id !== id));
+  };
+
+  return (
+    <div className="App">
+      <div style={{ position: "fixed", top: "10px", right: "20px" }}>
+        {toast.map((t, index) =>
+          <div key={t.id} style={{ marginTop: `${index * 60}px` }}>
+            <Toast close={() => removeToast(t.id)} />
+          </div>
+        )}
+      </div>
+      <h1>Hello React.</h1>
+      <button onClick={handleClick}>Click Me To Show Toaster</button>
+    </div>
+  );
+};
+
+export default MyToaster;
+
+const Toast = ({ close }) => {
+  return (
+    <div
+      style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "20px",
+        backgroundColor: "white",
+        padding: "10px",
+        backgroundColor: "red"
+      }}
+    >
+      <h1>I am a sweet Toast</h1>
+      <button
+        style={{ fontSize: "3rem", backgroundColor: "transparent" }}
+        onClick={close}
+      >
+        x
+      </button>
+    </div>
+  );
+};

src/App.jsx

@@ -35,7 +35,7 @@ import FollowingCurser from "./All Assessment/assessment19/FollowingCurser";
 
 import Debouncing from "./All Assessment/assessment19/Debouncing";
 import Toster from "./All Assessment/assessment21/Toster";
-
+import MyToaster from "./All Assessment/assessment21/MyToaster";
 
 ReactGA.initialize("G-R3DJ0V5QK6");
 
@@ -104,7 +104,9 @@ const App = () => {
         <Route path="/following-curser" element={<FollowingCurser />} />
         <Route path="/problems" element={<ProblemsPage />} />
         <Route path="/feedback" element={<Feedback />} />
-        <Route path="/debouncing" element={<Debouncing />} /><Route path="/toster" element={<Toster />} />
+        <Route path="/debouncing" element={<Debouncing />} />
+        <Route path="/toster" element={<Toster />} />
+        <Route path="/mytoster" element={<MyToaster />} />
         <Route
           path="/code"
           element={<Code code={exampleCode} language="javascript" />}

src/Utils.js

@@ -84,6 +84,10 @@ export const buttonDetails = [
   {
     name: "Toster",
     description: "Toster message trigger on event."
+  },
+  {
+    name: "MyToster",
+    description: "Toster message trigger on event jo ki maine khud banaya hai"
   }
 ];