From 21d7671480dc6318ee3f2e55dd4604b511dfd5ff Mon Sep 17 00:00:00 2001
From: pani2004 <debashispani61@gmail.com>
Date: Sat, 6 Jul 2024 00:55:02 +0530
Subject: [PATCH 1/2] Added contributors page

---
 frontend/src/App.tsx                |  2 +
 frontend/src/components/Footer.tsx  |  3 ++
 frontend/src/pages/Contributors.tsx | 61 +++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+)
 create mode 100644 frontend/src/pages/Contributors.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index d6ea8e7c..04d12e58 100644
--- a/frontend/src/App.tsx
+++ b/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"
diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index 5fc3b72a..a140f0a1 100644
--- a/frontend/src/components/Footer.tsx
+++ b/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'>
diff --git a/frontend/src/pages/Contributors.tsx b/frontend/src/pages/Contributors.tsx
new file mode 100644
index 00000000..0863a674
--- /dev/null
+++ b/frontend/src/pages/Contributors.tsx
@@ -0,0 +1,61 @@
+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-black text-gray-200">
+      <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 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-900 mb-2">{contributor.login}</h2>
+              
+              <p className="text-gray-700">
+                Contributions: {contributor.contributions}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default Contributors;
+

From 0313aec6f1ae0743eae94f592c7ff1c1581cb732 Mon Sep 17 00:00:00 2001
From: pani2004 <debashispani61@gmail.com>
Date: Sat, 6 Jul 2024 12:51:09 +0530
Subject: [PATCH 2/2] Made it theme responsive

---
 frontend/src/pages/Contributors.tsx | 15 ++++++++++-----
 1 file changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/Contributors.tsx b/frontend/src/pages/Contributors.tsx
index 0863a674..c5fa88e4 100644
--- a/frontend/src/pages/Contributors.tsx
+++ b/frontend/src/pages/Contributors.tsx
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
+
 interface Contributor {
   id: number;
   login: string;
@@ -7,8 +8,10 @@ interface Contributor {
   avatar_url: string;
   contributions: number;
 }
+
 const Contributors: React.FC = () => {
   const [contributors, setContributors] = useState<Contributor[]>([]);
+
   useEffect(() => {
     async function fetchContributors() {
       try {
@@ -24,14 +27,14 @@ const Contributors: React.FC = () => {
   }, []);
 
   return (
-    <div className="bg-black text-gray-200">
+    <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 border border-gray-300 rounded-lg shadow-md p-4 transition-transform transform hover:scale-105 hover:shadow-xl"
+              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}
@@ -45,9 +48,10 @@ const Contributors: React.FC = () => {
                   className="w-24 h-24 rounded-full object-cover mb-4"
                 />
               </a>
-              <h2 className="text-lg font-medium text-gray-900 mb-2">{contributor.login}</h2>
-              
-              <p className="text-gray-700">
+              <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>
@@ -57,5 +61,6 @@ const Contributors: React.FC = () => {
     </div>
   );
 };
+
 export default Contributors;