diff --git a/src/components/Contributors/Contribute.css b/src/components/Contributors/Contribute.css new file mode 100644 index 00000000..1bcfdd50 --- /dev/null +++ b/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; +} diff --git a/src/components/Contributors/Contribute.jsx b/src/components/Contributors/Contribute.jsx new file mode 100644 index 00000000..496f2226 --- /dev/null +++ b/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 => ( +
handleProfileClick(contributor.login)}> + {contributor.login} +
+

{contributor.login}

+

{contributor.contributions} contributions

+
+
+ )); + }; + + const createPaginationButtons = () => { + const totalPages = Math.ceil(contributors.length / contributorsPerPage); + return Array.from({ length: totalPages }, (_, index) => ( + + )); + }; + + return ( +
+

Our Contributors

+
+ {displayContributors()} +
+
+ {createPaginationButtons()} +
+
+ ); +}; + +export default Contribute; diff --git a/src/components/Dashboard/Dashboard.jsx b/src/components/Dashboard/Dashboard.jsx index 911e85ee..cd341697 100644 --- a/src/components/Dashboard/Dashboard.jsx +++ b/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 -
-
+
+
))}
- +
diff --git a/src/components/FAQs/FAQS.jsx b/src/components/FAQs/FAQs.jsx similarity index 97% rename from src/components/FAQs/FAQS.jsx rename to src/components/FAQs/FAQs.jsx index 2c3f30a1..f85a6049 100644 --- a/src/components/FAQs/FAQS.jsx +++ b/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 ( -
+

Frequently Asked Questions

{faqs.map((faq, index) => ( diff --git a/src/components/Footer/Footer.jsx b/src/components/Footer/Footer.jsx index 61e34ae8..6fcce637 100644 --- a/src/components/Footer/Footer.jsx +++ b/src/components/Footer/Footer.jsx @@ -15,7 +15,14 @@ function Footer() {
  • Blog
    • -
  • Help
    • +
  • + + FAQs + +
  • Privacy
  • Terms
  • @@ -26,7 +33,14 @@ function Footer() { Contact
    • -
  • Our Countributors
    • +
  • + + Our Contributors + +
  • Join Us

    • © 2023 Counsellor

    @@ -38,9 +52,27 @@ function Footer() { > - - - + + + + + + + + +
    diff --git a/src/components/index.js b/src/components/index.js index 5be942e9..21b171f8 100644 --- a/src/components/index.js +++ b/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 }; diff --git a/src/index.jsx b/src/index.jsx index 7ca1bdd2..7d2efe08 100644 --- a/src/index.jsx +++ b/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: , element: , }, + { + path: "/Contribute", + errorElement: , + element: , + } ], }, ]);