Merge pull request #605 from pandeyji711/Contributor

added contributor secton
HimanshuNarware · Jun 2, 2024 · b23d4c6 · b23d4c6
2 parents 897e621 + a489ba5
commit b23d4c6
Show file tree

Hide file tree

Showing 5 changed files with 151 additions and 33 deletions.
diff --git a/frontend/src/App.js b/frontend/src/App.js
@@ -19,6 +19,10 @@ import Review from "./Component/Review";
 import AOS from "aos";
 import "aos/dist/aos.css";
 import { Toaster } from "react-hot-toast";
+import { BrowserRouter } from "react-router-dom";
+import ScrollToTop from "./Component/ScrollToTop";
+
+
 import RemoteJobs from "./pages/RemoteJobs";
 import AI from "./pages/AI";
 import Movie from "./pages/Movie";
@@ -39,6 +43,21 @@ function App() {
   AOS.init();
   return (
     <>
+      <BrowserRouter>
+        <ScrollToTop />
+        <Navbar setSearchQuery={setSearchQuery} />
+
+        <Routes>
+          <Route path="/" element={<Home searchQuery={searchQuery} />} />          <Route path="/bookmark" element={<BookMark />} />
+          <Route path="/about" element={<About />} />
+          <Route path="/open-source" element={<OpenSource />} />
+          <Route path="/review" element={<Review />} />
+          <Route path="*" element={<NotFound />} /> {/* 404 route */}
+        </Routes>
+
+        <BackToTopButton />
+        <Footer />
+
       <Navbar setSearchQuery={setSearchQuery} />
       <Routes>
         <Route path='/' element={<Home searchQuery={searchQuery} />}></Route>
@@ -71,6 +90,10 @@ function App() {
 
       </BrowserRouter>
 
+
+        <Toaster />
+        <ChatAssistant />
+      </BrowserRouter>
     </>
   );
 }

diff --git a/frontend/src/ChatAssistant/ChatAssistant.css b/frontend/src/ChatAssistant/ChatAssistant.css
@@ -77,6 +77,9 @@
 }
 
 
+  /* height: 50px;
+  width: 50px; */
+
 .Logo {
   height: 50px;
   width: 50px;

diff --git a/frontend/src/ChatAssistant/ChatAssistant.jsx b/frontend/src/ChatAssistant/ChatAssistant.jsx
@@ -20,7 +20,6 @@ const ChatAssistant = () => {
 
 
 
-
   const closeChatbot = () => {
     setIsOpen(false);
   };
@@ -37,6 +36,12 @@ const ChatAssistant = () => {
         }
         onMouseLeave={() => (document.querySelector(".Logo").src = chatbotLogo)}
       />
+      {isOpen && (
+        <div
+          className={`${
+            isOpen ? "chatbot-animation" : "chatbot-close-animation"
+          }`}
+        >
       <div
         className={`${
           isOpen ? "chatbot-animation" : "chatbot-close-animation"
@@ -48,6 +53,10 @@ const ChatAssistant = () => {
             messageParser={MessageParser}
             actionProvider={ActionProvider}
           />
+          <button className="close-button" onClick={closeChatbot}>
+            X
+          </button>
+        </div>
         )}
       </div>
 

diff --git a/frontend/src/Component/Home.js b/frontend/src/Component/Home.js
@@ -32,6 +32,7 @@ function Home(props) {
   const [loading, setLoading] = useState(false);
   const [showPopup, setShowPopup] = useState(false);
   const [showRemovePopup, setShowRemovePopup] = useState(false);
+  const [contributors, setContributors] = useState([]);
 
   const currentPost1 = dataBaseData;
   let allvalue = [];
@@ -65,7 +66,17 @@ function Home(props) {
       }
       setLoading(false);
     };
+
+    const fetchContributors = async () => {
+      const response = await axios.get(
+        "https://api.github.com/repos/HimanshuNarware/Devlabs/contributors"
+      );
+      setContributors(response.data);
+    };
+
     fetchData();
+    fetchContributors();
+
     return () => {
       window.removeEventListener("storage", handleStorageChange);
     };
@@ -141,7 +152,6 @@ function Home(props) {
         })
       );
       toast.success("Bookmark added successfully");
-
     } else {
       let found = false;
       for (let item of bookmarks) {
@@ -283,38 +293,44 @@ function Home(props) {
             );
           })}
         </div>
-
-        {filteredData.length > 16 && (
-          <nav>
-            <ul className="pagination">
-              <li className="page-item">
-                {currentPage > 1 && (
-                  <button href="#" className="page-link" onClick={prePage}>
-                    prev
-                  </button>
-                )}
+        <div className="pagination">
+          <ul>
+            <li>
+              <a href="#!" onClick={prePage}>
+                &lt;
+              </a>
+            </li>
+            {numbers.map((n, i) => (
+              <li key={i} className={`${currentPage === n ? "active" : ""}`}>
+                <a href="#!" onClick={() => changeCPage(n)}>
+                  {n}
+                </a>
               </li>
-              <li className={`page-item active`}>
-                <button
-                  href="#"
-                  className="page-link"
-                  onClick={() => changeCPage(currentPage)}
-                >
-                  {currentPage}
-                </button>
-              </li>
-              <li className="page-item">
-                <button href="#" className="page-link" onClick={nextPage}>
-                  next
-                </button>
-              </li>
-            </ul>
-          </nav>
-        )}
-
-        {filteredData.length === 0 ? (
-          <h2>There is nothing here to show.</h2>
-        ) : null}
+            ))}
+            <li>
+              <a href="#!" onClick={nextPage}>
+                &gt;
+              </a>
+            </li>
+          </ul>
+        </div>
+      </div>
+      <div className="contributors-section">
+        <h2>Faces of Dedication: Our Contributing Heroes</h2>
+        <div className="contributors-grid">
+          {contributors.map((contributor) => (
+            <a
+              key={contributor.id}
+              href={contributor.html_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="contributor"
+            >
+              <img src={contributor.avatar_url} alt={contributor.login} />
+              <p>{contributor.login}</p>
+            </a>
+          ))}
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/style/Home.css b/frontend/src/style/Home.css
@@ -34,6 +34,73 @@
   ); /* Background color of the scrollbar track */
   border-radius: 15px;
 }
+/* contributor style */
+.contributors-section {
+  text-align: center;
+  margin: 50px 0;
+}
+
+.contributors-grid {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+.contributor {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.contributor img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.contributor p {
+  margin: 0;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.pagination ul {
+  list-style-type: none;
+  padding: 0;
+  display: flex;
+  gap: 5px;
+}
+
+.pagination li {
+  display: inline;
+}
+
+.pagination a {
+  display: block;
+  padding: 10px 15px;
+  text-decoration: none;
+  color: #ffb347; /* Light orange text color */
+  background-color: #333; /* Dark background color */
+  border-radius: 4px;
+  transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+.pagination a:hover {
+  background-color: #555; /* Slightly lighter dark background on hover */
+  color: #fff; /* White text color on hover */
+}
+
+.pagination .active a {
+  background-color: #ffb347; /* Light orange background color for active page */
+  color: #333; /* Dark text color for active page */
+}
 
 ::-webkit-scrollbar-thumb {
   background-color: var(--scrollbar-thumb); /* Color of the scrollbar thumb */