Contributor Page Addn PR ( #116) from akash70629/main

Feature: Add Contributor List to Creator Page

frontend/src/pages/CreatorsPage.css

@@ -0,0 +1,141 @@
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+  }
+
+  body {
+    font-family: Arial, sans-serif;
+    line-height: 1.6;
+    color: #333;
+    background-color: #f5f5f5;
+  }
+
+
+  /* Stats Section */
+  .contributor-stats {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 4rem 0;
+    text-align: center;
+  }
+
+  .contributor-stats h2 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .contributor-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 2rem;
+    margin-bottom: 40px;
+  }
+
+  .contributor-stat-card {
+    background-color: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    padding: 1.5rem;
+    text-align: center;
+  }
+
+  .contributor-stat-card .contributor-icon {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+  }
+
+  .contributor-stat-card h3 {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .contributor-stat-card p {
+    color: #666;
+  }
+
+  /* Contributors Section */
+  .contributor-contributors {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 4rem 0;
+    text-align: center;
+  }
+
+  .contributor-contributors h2 {
+    font-size: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .contributor-contributors-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 2rem;
+  }
+
+  .contributor-contributor-card {
+    background-color: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 10px;
+    overflow: hidden;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+  }
+
+  .contributor-contributor-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+  }
+
+  .contributor-contributor-card img {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    margin: 1.5rem auto;
+    display: block;
+    border: 4px solid #f0f0f0;
+  }
+
+  .contributor-contributor-card h3 {
+    font-size: 1.2rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .contributor-contributor-card p {
+    color: #666;
+    margin-bottom: 1rem;
+  }
+
+  .contributor-contributor-card .contributor-contributions {
+    background-color: #f0f0f0;
+    padding: 0.5rem 1rem;
+    border-radius: 20px;
+    display: inline-block;
+    margin-bottom: 1rem;
+  }
+
+  .contributor-contributor-card .contributor-footer {
+    background-color: #f9f9f9;
+    padding: 1rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .contributor-contributor-card .contributor-footer a {
+    color: #333;
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    font-size: 25px;
+    margin: auto;
+
+
+
+  }
+
+  .contributor-contributor-card .contributor-footer svg {
+    margin-right: 0.5rem;
+  }
+
+
+

frontend/src/pages/CreatorsPage.jsx

@@ -1,13 +1,117 @@
-import React from 'react'
-import Footer from '../components/Footer'
+import React, { useEffect, useState } from 'react';
+import Footer from '../components/Footer';
+import './CreatorsPage.css';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faGithub } from '@fortawesome/free-brands-svg-icons';
+
 
 const CreatorsPage = () => {
+    const [contributors, setContributors] = useState([]);
+    const [repoStats, setRepoStats] = useState({});
+    const [loading, setLoading] = useState(true);
+
+    // Fetch data from GitHub API
+    const fetchData = async () => {
+        try {
+            const contributorsResponse = await fetch('https://api.github.com/repos/4darsh-Dev/DecenTrade/contributors');
+            const contributorsData = await contributorsResponse.json();
+
+
+
+            const repoResponse = await fetch('https://api.github.com/repos/4darsh-Dev/DecenTrade');
+            const repoData = await repoResponse.json();
+
+            setContributors(contributorsData);
+            setRepoStats(repoData);
+        } catch (error) {
+            console.error('Error fetching data:', error);
+            setContributors([]);
+            setRepoStats({});
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        fetchData();
+    }, []);
+
+    // Render stats
+    const renderStats = () => {
+        const contributorsCount = contributors.length;
+        const stats = [
+            { label: 'Contributors', value: contributorsCount, icon: 'users' },
+            { label: 'Total Contributions', value: contributors.reduce((sum, contributor) => sum + contributor.contributions, 0) || 0, icon: 'git-commit' },
+            { label: 'GitHub Stars', value: repoStats.stargazers_count || 0, icon: 'star' },
+            { label: 'Forks', value: repoStats.forks_count || 0, icon: 'git-branch' }
+        ];
+
+        return (
+            <div className="contributor-stats-grid" id="statsGrid">
+                {stats.map(stat => (
+                    <div className="contributor-stat-card" key={stat.label}>
+                        <div className="contributor-icon" dangerouslySetInnerHTML={{ __html: getIcon(stat.icon) }} />
+                        <h3>{stat.value}</h3>
+                        <p>{stat.label}</p>
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    // Render contributors
+    const renderContributors = () => {
+        return (
+            <div className="contributor-contributors-grid" id="contributorsGrid">
+                {contributors.map(contributor => (
+                    <div className="contributor-contributor-card" key={contributor.login}>
+                        <img src={contributor.avatar_url} alt={contributor.login} />
+                        <h3>{contributor.login}</h3>
+                        <p>{contributor.type}</p>
+                        <div className="contributor-contributions">{contributor.contributions} contributions</div>
+                        <div className="contributor-footer">
+                            <a href={contributor.html_url} target="_blank" rel="noopener noreferrer">
+                                {getIcon('external-link')}
+                                <FontAwesomeIcon icon={faGithub} />
+                            </a>
+                            {getIcon('github')}
+                        </div>
+                    </div>
+                ))}
+            </div>
+        );
+    };
+
+    // Helper function to get icons
+    const getIcon = (name) => {
+        const icons = {
+            //    svg icons 
+        };
+        return icons[name] || '';
+    };
+
     return (
         <>
-            <h1>Creators Page</h1>
+
+            <section className="contributor-contributors">
+                {loading ? (
+                    <div id="loading" className="contributor-loading">
+                    </div>
+                ) : (
+                    <>
+                        <h2>Project Statistics</h2>
+                        {renderStats()}
+                        <h2>Meet Our Contributors</h2>
+                        {renderContributors()}
+                    </>
+                )}
+            </section>
+            <Footer />
+
+
 
         </>
-    )
-}
+    );
+};
 
-export default CreatorsPage
+export default CreatorsPage;