-
-
Notifications
You must be signed in to change notification settings - Fork 24
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #81 from Akshithsaai/feature/contributorPage
Fixes: #75 Added a contributors page
- Loading branch information
Showing
6 changed files
with
873 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import React from 'react' | ||
import MyCard from "./MyCard"; | ||
import { useState,useEffect } from 'react'; | ||
|
||
function Contributors() { | ||
|
||
const [contributors,setContributors] = useState(); | ||
|
||
useEffect(()=>{ | ||
async function fetchAllContributors() { | ||
const contributors = []; | ||
let page = 1; | ||
const perPage = 100; | ||
|
||
try { | ||
while (true) { | ||
const response = await fetch(`https://api.github.com/repos/vansh-codes/Gityzer/contributors?per_page=${perPage}&page=${page}`); | ||
const data = await response.json(); | ||
|
||
// If the data is empty, we have no more pages | ||
if (data.length === 0) break; | ||
|
||
// Add contributors from this page to the array | ||
contributors.push(...data); | ||
page++; | ||
} | ||
console.log(contributors); | ||
|
||
} catch (error) { | ||
console.error('Error fetching contributors data:', error); | ||
} | ||
|
||
setContributors(contributors); | ||
} | ||
fetchAllContributors(); | ||
},[]) ; | ||
return ( | ||
<> | ||
<div className="flex text-xl font-bold text-white mb-10"> ❤️ Our Repo Contributors ❤️</div> | ||
<div className="grid grid-cols-1 gap-4 md:grid-cols-4 lg:grid-cols-6"> | ||
{ | ||
contributors?.map((contributor)=>{ | ||
return ( | ||
<MyCard login={contributor.login} img ={contributor.avatar_url} | ||
url={contributor.html_url} contributions={contributor.contributions} | ||
/> | ||
) | ||
}) | ||
} | ||
</div> | ||
</> | ||
) | ||
} | ||
|
||
export default Contributors |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import React from 'react' | ||
import { Card, CardContent, CardMedia, Typography, Avatar } from '@mui/material'; | ||
|
||
function MyCard({login,img,url,contributions}) { | ||
return ( | ||
<Card sx={{ minWidth: '90%', | ||
textAlign: 'center', | ||
flexWrap:'wrap', | ||
backgroundColor:'transparent', | ||
border:'1px solid white', | ||
color:'white', | ||
cursor:'pointer', | ||
transition: 'transform 0.3s ease, background-color 0.3s ease', | ||
'&:hover': { | ||
backgroundColor: 'black', | ||
opacity:'0.8', | ||
border:'1px solid green', | ||
transform: 'scale(1.05)', | ||
|
||
}, | ||
}}> | ||
<a href={url}> | ||
<CardMedia | ||
component="img" | ||
height="140" | ||
image={img} | ||
alt={`${login} avatar`} | ||
sx={{ width: 70, height: 70, borderRadius: '50%', margin: 'auto', mt: 2 }} | ||
/> | ||
<CardContent> | ||
<Typography variant="h7">{login}</Typography> | ||
<Typography sx={{mt:1}}>{contributions} Contributions </Typography> | ||
</CardContent> | ||
</a> | ||
</Card> | ||
) | ||
} | ||
|
||
export default MyCard |
Oops, something went wrong.