style: added react toastify

package.json

@@ -35,6 +35,7 @@
     "react-icons": "^4.9.0",
     "react-paginate": "^8.2.0",
     "react-router-dom": "^6.11.2",
+    "react-toastify": "^9.1.3",
     "styled-components": "5.3.11",
     "workspace-name": "^0.0.0"
   },

src/App.jsx

@@ -4,6 +4,7 @@ import Layout from './components/Layout';
 import { ThemeProvider } from './context/Theme';
 import { lazy, Suspense } from 'react';
 import Loader from './utils/Loader';
+import { ToastContainer } from 'react-toastify';
 
 const ProjectsPage = lazy(() => import('./pages/ProjectsPage'));
 const HomePage = lazy(() => import('./pages/HomePage'));
@@ -54,6 +55,7 @@ const App = () => {
   return (
     <ThemeProvider>
       <RouterProvider router={router} />
+      <ToastContainer />
     </ThemeProvider>
   );
 };

src/pages/HomePage.jsx

@@ -3,10 +3,24 @@ import { Link } from 'react-router-dom';
 import Banner from '../components/Banner';
 import { ThemeContext } from '../context/Theme';
 import images from '../DB/homepage-image.json';
+import { toast } from 'react-toastify';
+import 'react-toastify/dist/ReactToastify.css';
 
 const HomePage = () => {
   const { theme } = useContext(ThemeContext);
 
+  const notify = () =>
+    toast('Want to add your project? Check out the docs!', {
+      position: 'top-right',
+      autoClose: 5000,
+      hideProgressBar: false,
+      closeOnClick: true,
+      pauseOnHover: true,
+      draggable: false,
+      progress: undefined,
+      theme: 'light',
+    });
+
   return (
     <section>
       <div className="relative overflow-hidden">
@@ -73,6 +87,7 @@ const HomePage = () => {
                     backgroundColor: theme?.button?.buttonBgColor,
                     color: theme?.button?.buttonTextColor,
                   }}
+                  onClick={notify}
                 >
                   Browse Projects
                 </Link>