Add toast error to event page

package.json

@@ -14,6 +14,7 @@
     "react": "^18.2.0",
     "react-calendar": "^4.8.0",
     "react-dom": "^18.2.0",
+    "react-hot-toast": "^2.4.1",
     "react-icons": "^5.0.1",
     "react-router-dom": "^6.21.1",
     "react-slick": "^0.30.2"

src/App.jsx

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { useLocation, Routes, Route } from 'react-router-dom';
 import { About, Article, Events, Home, Privacy, Resources } from './pages';
+import { Toaster } from 'react-hot-toast';
 import NavigationBar from './layout/NavigationBar';
 import Footer from './layout/Footer';
 import './App.css';
@@ -13,6 +14,7 @@ function App() {
       {/* Main content */}
       <ScrollToTop />
       <main className='w-full'>
+        <div><Toaster/></div>
         <Routes>
           <Route path='/' element={<Home />} />
           <Route path='/privacy' element={<Privacy />} />

src/pages/events/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Calendar from 'react-calendar';
+import { toast } from 'react-hot-toast';
 import { FaSearch } from 'react-icons/fa';
 import articles from './articles.json' with {type: 'json'};
 import SearchResult from './SearchResult';
@@ -50,7 +51,7 @@ function Events() {
             }
 
             {/* TODO: handle this */}
-            <button className='' onClick={() => alert('More coming soon!')}>
+            <button className='' onClick={() => toast.error('More coming soon!')}>
               More Results
             </button>
           </div>