From 31049f104f3673ade72ed2e3934db3b15a5ee3ca Mon Sep 17 00:00:00 2001
From: KGupta2601 <gkashika26@gmail.com>
Date: Sat, 9 Nov 2024 17:08:56 +0530
Subject: [PATCH] added contributor card and contributors list along with
 animation

---
 .../src/components/ContributorCard.css        | 24 +++++++++++
 .../src/components/ContributorCard.jsx        | 43 +++++++++++++++++++
 .../src/components/ContributorsList.css       |  5 +++
 .../src/components/ContributorsList.jsx       | 13 ++++++
 4 files changed, 85 insertions(+)
 create mode 100644 chaosweb-v@2/src/components/ContributorCard.css
 create mode 100644 chaosweb-v@2/src/components/ContributorCard.jsx
 create mode 100644 chaosweb-v@2/src/components/ContributorsList.css
 create mode 100644 chaosweb-v@2/src/components/ContributorsList.jsx

diff --git a/chaosweb-v@2/src/components/ContributorCard.css b/chaosweb-v@2/src/components/ContributorCard.css
new file mode 100644
index 0000000..549f33a
--- /dev/null
+++ b/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);
+  }
+}
\ No newline at end of file
diff --git a/chaosweb-v@2/src/components/ContributorCard.jsx b/chaosweb-v@2/src/components/ContributorCard.jsx
new file mode 100644
index 0000000..61193ab
--- /dev/null
+++ b/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;
diff --git a/chaosweb-v@2/src/components/ContributorsList.css b/chaosweb-v@2/src/components/ContributorsList.css
new file mode 100644
index 0000000..5b0a5e8
--- /dev/null
+++ b/chaosweb-v@2/src/components/ContributorsList.css
@@ -0,0 +1,5 @@
+.contributors-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
\ No newline at end of file
diff --git a/chaosweb-v@2/src/components/ContributorsList.jsx b/chaosweb-v@2/src/components/ContributorsList.jsx
new file mode 100644
index 0000000..cfeab5a
--- /dev/null
+++ b/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;
\ No newline at end of file