Merge pull request #665 from ayush-848/master

Added Our Contributors page

src/components/Contributors/Contribute.css

@@ -0,0 +1,69 @@
+/* Contribute.css */
+
+.contributor-heading {
+  font-size: 3rem !important;
+}
+
+.contributor-cards {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 20px;
+  margin-left: 10%;
+}
+
+
+.contributor-member {
+  width: 180px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  text-align: center;
+  background-color: #cce5ff; /* Light bluish background color */
+}
+
+.contributor-member:hover{
+  transform: translateY(-5px);
+  box-shadow: black 14px;
+  cursor: pointer;
+}
+
+.contributor-member img {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  margin-bottom: 10px;
+}
+
+.contributor-member h3 {
+  font-size: 16px;
+}
+
+.contributor-member p {
+  font-size: 14px;
+}
+
+.pagination {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+}
+
+.pagination-button {
+  margin: 0 5px;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  background-color: #fff;
+  cursor: pointer;
+}
+
+.pagination-button.active {
+  background-color: #007bff;
+  color: #fff;
+  border-color: #007bff;
+}
+
+.pagination-button:hover {
+  background-color: #e9ecef;
+}

src/components/Contributors/Contribute.jsx

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from 'react';
+import './Contribute.css'; // Import CSS file for styles
+
+const Contribute = () => {
+  const owner = 'Counselllor';
+  const repo = 'Counsellor-Web';
+  const contributorsPerPage = 5; // Changed to display 5 contributors per page
+  const [contributors, setContributors] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  useEffect(() => {
+    const fetchContributors = async () => {
+      try {
+        const response = await fetch(`https://api.github.com/repos/${owner}/${repo}/contributors`);
+        if (!response.ok) {
+          console.error('Failed to fetch contributors:', response.statusText);
+          return;
+        }
+        const data = await response.json();
+        setContributors(data);
+      } catch (error) {
+        console.error('Error fetching contributors:', error);
+      }
+    };
+
+    fetchContributors();
+  }, [owner, repo]);
+
+  const handleProfileClick = (username) => {
+    const profileUrl = `https://github.com/${username}`;
+    window.open(profileUrl, '_blank'); // Open the GitHub profile in a new tab
+  };
+
+  const displayContributors = () => {
+    const startIndex = (currentPage - 1) * contributorsPerPage;
+    const endIndex = startIndex + contributorsPerPage;
+    return contributors.slice(startIndex, endIndex).map(contributor => (
+      <div key={contributor.login} className="contributor-member" onClick={() => handleProfileClick(contributor.login)}>
+        <img src={contributor.avatar_url} alt={contributor.login} />
+        <div>
+          <h3>{contributor.login}</h3>
+          <p>{contributor.contributions} contributions</p>
+        </div>
+      </div>
+    ));
+  };
+
+  const createPaginationButtons = () => {
+    const totalPages = Math.ceil(contributors.length / contributorsPerPage);
+    return Array.from({ length: totalPages }, (_, index) => (
+      <button
+        key={index + 1}
+        className={`pagination-button ${currentPage === index + 1 ? 'active' : ''}`}
+        onClick={() => setCurrentPage(index + 1)}
+      >
+        {index + 1}
+      </button>
+    ));
+  };
+
+  return (
+    <div>
+      <h1 className='contributor-heading'>Our Contributors</h1>
+      <div className="contributor-cards">
+        {displayContributors()}
+      </div>
+      <div className="pagination">
+        {createPaginationButtons()}
+      </div>
+    </div>
+  );
+};
+
+export default Contribute;

src/components/Dashboard/Dashboard.jsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from "react";
 import "./Dashboard.css";
-import { useNavigate, NavLink, Link } from "react-router-dom";
+import { useNavigate, NavLink, Link, useLocation } from "react-router-dom";
 import Logo from "../../assets/logo.webp";
 import { signOut, onAuthStateChanged } from "firebase/auth";
 import { auth } from "../../firebase/auth";
@@ -10,30 +10,34 @@ import ScrollToTop from "react-scroll-to-top";
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import CollegeCard from "./CollegeCard";
-import FAQS from "../FAQs/FAQS";
+import FAQs from '../FAQs/FAQs';
+
 
 const Dashboard = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const [menuOpen, setMenuOpen] = useState(false);
   const [searchTerm, setSearchTerm] = useState("");
   const [filteredColleges, setFilteredColleges] = useState(collegesData);
+
   useEffect(() => {
     auth.onAuthStateChanged((user) => {
       if (user) {
         toast.success("Logged in! 🚀",{
           className: "toast-message",
-        })
+        });
         console.log("");
       } else if (!user) {
         toast.success("Logged out!",{
           className: "toast-message",
-        })
+        });
         setTimeout(() => {
           navigate("/");
         }, 1000);
       }
     });
   }, []);
+
   useEffect(() => {
     const results = collegesData.filter(
       (college) =>
@@ -43,6 +47,15 @@ const Dashboard = () => {
     setFilteredColleges(results);
   }, [searchTerm]);
 
+  useEffect(() => {
+    if (location.hash === "#faqs1") {
+      const faqsElement = document.getElementById("faqs1");
+      if (faqsElement) {
+        faqsElement.scrollIntoView({ behavior: "smooth" });
+      }
+    }
+  }, [location]);
+
   const handleSignOut = useCallback(() => {
     signOut(auth)
       .then(() => {
@@ -71,6 +84,7 @@ const Dashboard = () => {
   const handleSearchChange = useCallback((e) => {
     setSearchTerm(e.target.value);
   }, []);
+
   const [activeIndex, setActiveIndex] = useState(null);
 
   const handleTouchStart = (index) => {
@@ -81,26 +95,21 @@ const Dashboard = () => {
     setActiveIndex(null);
   };
 
+  const [fix, setFix] = useState(false);
 
-
-
-const [fix, setFix]= useState(false)
-//function for appearance of background for nav menu
-function setFixed(){
-  if(window.scrollY>0){
-    setFix(true)
-  }else{
-    setFix(false)
-  }
-}
+  const setFixed = () => {
+    if (window.scrollY > 0) {
+      setFix(true);
+    } else {
+      setFix(false);
+    }
+  };
 
-window.addEventListener("scroll", setFixed)
+  window.addEventListener("scroll", setFixed);
 
   return (
-    //scrolltotop is for scroll to top widget
-    //Then the navbar code begins
-      <main>
-        <div className="scroll">
+    <main>
+      <div className="scroll">
         <ScrollToTop
         smooth
         viewBox="0 0 24 24"
@@ -202,7 +211,7 @@ window.addEventListener("scroll", setFixed)
             </div>
           ))}
         </div>
-        <FAQS/>
+        <FAQs/>
         <Footer />
       </main>
 

src/components/FAQs/FAQS.jsx → src/components/FAQs/FAQs.jsx

@@ -1,5 +1,4 @@
 // FAQs.jsx
-
 import React, { useState } from 'react';
 import './FAQs.css';
 
@@ -31,7 +30,7 @@ const FAQs = () => {
   };
 
   return (
-    <div className="faqs-container">
+    <div id="faqs" className="faqs-container">
       <h2>Frequently Asked Questions</h2>
       <div className="accordion">
         {faqs.map((faq, index) => (

src/components/Footer/Footer.jsx

@@ -15,7 +15,14 @@ function Footer() {
             </a>
           </li>
           <li>Blog</li>
-          <li>Help</li>
+          <li>
+            <a
+              style={{ textDecoration: "none", color: "inherit" }}
+              href="./FAQs"
+            >
+              FAQs
+            </a>
+          </li>
           <li>Privacy</li>
           <li>Terms</li>
           <li>
@@ -26,7 +33,14 @@ function Footer() {
               Contact
             </a>
           </li>
-          <li>Our Countributors</li>
+          <li>
+            <a
+              style={{ textDecoration: "none", color: "inherit" }}
+              href="./contribute"
+            >
+              Our Contributors
+            </a>
+          </li>
           <li>Join Us</li>
         </ul>
         <p>© 2023 Counsellor</p>
@@ -38,9 +52,27 @@ function Footer() {
           >
             <FaGithub />
           </a>
-          <FaFacebook />
-          <FaInstagram />
-          <FaLinkedin />
+          <a
+            href="https://facebook.com"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaFacebook />
+          </a>
+          <a
+            href="https://instagram.com"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaInstagram />
+          </a>
+          <a
+            href="https://linkedin.com"
+            target="_blank"
+            rel="noreferrer"
+          >
+            <FaLinkedin />
+          </a>
         </div>
       </div>
     </footer>

src/components/index.js

@@ -4,7 +4,8 @@ import ForgotPasswordForm from "./ForgotPassword/ForgotPassword.jsx";
 import LoginForm from './Login/Login.jsx';
 import Navbar from "./Navbar/Navbar.jsx";
 import SignUpForm from './SignUp/SignUp.jsx';
-import FAQs from './FAQs/FAQS.jsx'
+import FAQs from './FAQs/FAQs.jsx'
+import Contribute from "./Contributors/Contribute.jsx";
 
 const Home = lazy(() => import("./Home/Home.jsx"));
 const About = lazy(() => import("./About/About.jsx"));
@@ -17,6 +18,7 @@ export {
     LoginForm,
     Navbar,
     SignUpForm,
-    FAQs
+    FAQs,
+    Contribute
 };
 

src/index.jsx

@@ -10,6 +10,7 @@ import {
   ForgotPasswordForm,
   SignUpForm,
   FAQs,
+  Contribute,
 } from "./components/index";
 import Loading from "./components/Loading/Loading";
 import Login from "./components/Login/Login";
@@ -77,6 +78,11 @@ const router = createBrowserRouter([
         errorElement: <ErrorPage />,
         element: <FAQs />,
       },
+      {
+        path: "/Contribute",
+        errorElement: <ErrorPage />,
+        element: <Contribute />,
+      }
     ],
   },
 ]);