Added contributors page

frontend/src/App.tsx

@@ -31,6 +31,7 @@ import EditPost from "./pages/EditPost";
 import useTheme from './hooks/useTheme';
 import CodeEditor from "./pages/CodeEditor";
 import TrendingPosts from "./pages/TrendingPosts";
+import Contributors from "./pages/Contributors";
 // import axios from "axios";
 // axios.defaults.baseURL = "http://localhost:3001/";
 
@@ -49,6 +50,7 @@ function App() {
                 <Route path="/app" element={<Home />} />
                 <Route path="/app/posts/:id" element={<Post />} />
                 <Route path="/app/posts" element={<Posts />} />
+                <Route path="/app/contributors" element={<Contributors/>}/>
                 <Route path="/app/profile/:id" element={<ShowProfile/>} />
                 <Route
                   path="/app/signin"

frontend/src/components/Footer.tsx

@@ -60,6 +60,9 @@ const Footer = () => {
                                     <CgProfile size={20} />
                                 </Link>
                             </li>
+                            <li className='py-1 cursor-pointer hover:text-[#2563EB]'>
+                                <Link to="/app/contributors">Our Contributors</Link>
+                            </li>
                         </ul>
                     </div>
                     <div className='md:w-1/3'>

frontend/src/pages/Contributors.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+interface Contributor {
+  id: number;
+  login: string;
+  html_url: string;
+  avatar_url: string;
+  contributions: number;
+}
+
+const Contributors: React.FC = () => {
+  const [contributors, setContributors] = useState<Contributor[]>([]);
+
+  useEffect(() => {
+    async function fetchContributors() {
+      try {
+        const response = await axios.get<Contributor[]>(
+          'https://api.github.com/repos/VaibhavArora314/StyleShare/contributors'
+        );
+        setContributors(response.data);
+      } catch (error) {
+        console.error('Error fetching contributors:', error);
+      }
+    }
+    fetchContributors();
+  }, []);
+
+  return (
+    <div className="bg-white dark:bg-black text-black dark:text-gray-200 min-h-screen">
+      <div className="container mx-auto py-8">
+        <h1 className="text-center text-4xl font-semibold mb-8">Contributors</h1>
+        <div className="flex flex-wrap justify-center gap-8">
+          {contributors.map((contributor) => (
+            <div
+              key={contributor.id}
+              className="w-full md:w-1/3 lg:w-1/4 flex flex-col items-center bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 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-900 dark:text-gray-100 mb-2">
+                {contributor.login}
+              </h2>
+              <p className="text-gray-700 dark:text-gray-400">
+                Contributions: {contributor.contributions}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Contributors;
+