Merge pull request #227 from KGupta2601/main

added cards for contributors

chaosweb-v@2/src/components/ContributorCard.css

@@ -0,0 +1,24 @@
+.contributor-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  margin: 10px;
+  transition: transform 0.3s ease;
+  opacity: 0;
+  transform: translateY(20px);
+  animation: slide-in 0.5s forwards;
+}
+
+.profile-pic {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+}
+
+@keyframes slide-in {
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

chaosweb-v@2/src/components/ContributorCard.jsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+import ContributorCard from './ContributorCard'; // Import the ContributorCard component
+import "./Contributors.css";
+
+const Contributors = () => {
+  const [contributors, setContributors] = useState([]);
+
+  // Fetch contributors from GitHub API
+  useEffect(() => {
+    const fetchContributors = async () => {
+      try {
+        const response = await fetch(
+          "https://api.github.com/repos/vansh-codes/ChaosWeb/contributors"
+        );
+        const data = await response.json();
+        setContributors(data); // Store the contributors' data in state
+      } catch (error) {
+        console.error("Error fetching contributors:", error);
+      }
+    };
+
+    fetchContributors();
+  }, []);
+
+  return (
+    <div className="contributors-list">
+      {contributors.length > 0 ? (
+        contributors.map((contributor) => (
+          <ContributorCard
+            key={contributor.id} // Use contributor.id as the key
+            name={contributor.login} // Contributor's GitHub username
+            profilePic={contributor.avatar_url} // Contributor's avatar URL
+            contributions={contributor.contributions} // Number of contributions
+          />
+        ))
+      ) : (
+        <p>Loading contributors...</p>
+      )}
+    </div>
+  );
+};
+
+export default Contributors;

chaosweb-v@2/src/components/ContributorsList.css

@@ -0,0 +1,5 @@
+.contributors-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}

chaosweb-v@2/src/components/ContributorsList.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import ContributorsList from './ContributorsList';
+
+const App = () => {
+  return (
+    <div>
+      <h1>Contributors</h1>
+      <ContributorsList />
+    </div>
+  );
+};
+
+export default App;