From 6544d33fd020228fe0c6ca22defb3ff8cd236da0 Mon Sep 17 00:00:00 2001
From: pani2004 <debashispani61@gmail.com>
Date: Tue, 16 Jul 2024 13:08:09 +0530
Subject: [PATCH] Added the contributors page

---
 src/App.js                 |  2 ++
 src/components/Footer.jsx  |  3 ++
 src/pages/Contributors.jsx | 58 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 63 insertions(+)
 create mode 100644 src/pages/Contributors.jsx

diff --git a/src/App.js b/src/App.js
index 1f6df9f..da7b1d9 100644
--- a/src/App.js
+++ b/src/App.js
@@ -17,6 +17,7 @@ import { ThemeProvider } from "./themeContext";
 import ContactUs from "./pages/ContactUs";
 import EditProfile from "./pages/EditProfile";
 import OtpVerify from "./pages/OtpVerify";
+import Contributors from "./pages/Contributors";
 
 const Layout = ({ children }) => {
   return (
@@ -54,6 +55,7 @@ function App() {
           <Route path="/login" element={<Login />} />
           <Route path="/signup" element={<Signup />} />
           <Route path="/contact" element={<ContactUs />} />
+          <Route path="/contributors" element={<Contributors/>}/>
 
           {token ? (
             <Route
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index a57af7f..6e75ef0 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -15,6 +15,9 @@ export default function Footer() {
           <li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
             <Link to="/news">News</Link>
           </li>
+          <li className="mr-4 hover:underline md:mr-6 hover:text-orange-600">
+            <Link to="/contributors">Our Contributors</Link>
+          </li>
         </ul>
         <span className="text-sm text-white sm:text-center">© 2024-2025 <Link to="/" className="hover:underline">Foodies™</Link>. All Rights Reserved.</span>
       </div>
diff --git a/src/pages/Contributors.jsx b/src/pages/Contributors.jsx
new file mode 100644
index 0000000..7c75672
--- /dev/null
+++ b/src/pages/Contributors.jsx
@@ -0,0 +1,58 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+import Navbar from '../components/Navbar';
+import Footer from '../components/Footer';
+function Contributors() {
+  const [contributors, setContributors] = useState([]);
+  useEffect(() => {
+    async function Contributors() {
+      try {
+        const response = await axios.get(
+          'https://api.github.com/repos/VanshKing30/FoodiesWeb/contributors'
+        );
+        setContributors(response.data);
+      } catch (error) {
+        console.error('Error in fetching contributors:', error);
+      }
+    }
+    Contributors();
+  }, []);
+  return (
+    <div className="w-full min-h-screen  pt-8 overflow-hidden mt-10 bg-black">
+       <Navbar/>
+      <h1 className="text-center text-4xl font-semibold text-gray-200 mb-8 uppercase">
+        Contributors
+      </h1>
+      <div className="flex flex-wrap justify-center gap-8 mb-16">
+        {contributors.map((contributor) => (
+          <div
+            key={contributor.id}
+            className="w-full md:w-1/3 lg:w-1/4 flex flex-col items-center bg-gray-800 border border-gray-300 rounded-lg shadow-md p-4 transition-transform transform hover:scale-105 hover:shadow-xl"
+          >
+            <a
+              href={contributor.html_url}
+              className="block"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <img
+                src={contributor.avatar_url}
+                alt={contributor.login}
+                className="w-24 h-24 rounded-full object-cover mb-4"
+              />
+            </a>
+            <h2 className="text-lg font-medium text-gray-100 mb-2">
+              {contributor.login}
+            </h2>
+            <p className="text-gray-300">
+              Contributions: {contributor.contributions}
+            </p>
+          </div>
+        ))}
+      </div>
+      <Footer/>
+    </div>
+  );
+}
+
+export default Contributors;
\ No newline at end of file