feat: integrate github api to fetch contributors (#139)
* feat: integrate github api to fetch contributors * fix: link credits page on mobile
This commit is contained in:
parent
430c6f08ad
commit
acd29e95cf
|
@ -1,113 +1,114 @@
|
|||
import React, { useState } from 'react'
|
||||
import React, { useState, useEffect } from 'react'
|
||||
import axios from 'axios'
|
||||
import ContributorsStyle from './Contributors.style'
|
||||
import styles from '../../styles/Contributors.module.css'
|
||||
import Image from 'next/image'
|
||||
import profilepic from 'assets/ContributorsImages/sampleImage.jpg'
|
||||
import { GitHub } from '@mui/icons-material'
|
||||
import Head from "next/head";
|
||||
import Script from "next/script";
|
||||
import Head from 'next/head'
|
||||
import Script from 'next/script'
|
||||
|
||||
const contributorsURL =
|
||||
'https://api.github.com/repos/bravo68web/url-minify/contributors'
|
||||
|
||||
export default function Contributors() {
|
||||
const [contributors, setContributors] = useState([
|
||||
{
|
||||
id: 1,
|
||||
profilepic,
|
||||
name: 'Jacob Myers',
|
||||
gitHubUsername: '@jacob',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
profilepic,
|
||||
name: 'John Doe',
|
||||
gitHubUsername: '@john',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
profilepic,
|
||||
name: 'Sara Williams',
|
||||
gitHubUsername: '@sara',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
profilepic,
|
||||
name: 'Sara Williams',
|
||||
gitHubUsername: '@sara',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
profilepic,
|
||||
name: 'Sara Williams',
|
||||
gitHubUsername: '@sara',
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
profilepic,
|
||||
name: 'Sara Williams',
|
||||
gitHubUsername: '@sara',
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
profilepic,
|
||||
name: 'Sara Williams',
|
||||
gitHubUsername: '@sara',
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
profilepic,
|
||||
name: 'Sara Williams',
|
||||
gitHubUsername: '@sara',
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
profilepic,
|
||||
name: 'Sara Williams',
|
||||
gitHubUsername: '@sara',
|
||||
},
|
||||
])
|
||||
const [contributors, setContributors] = useState({
|
||||
loading: true,
|
||||
error: null,
|
||||
data: [],
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
const fetchContributors = async () => {
|
||||
try {
|
||||
setContributors((prev) => ({ ...prev, loading: true }))
|
||||
const { data } = await axios.get(contributorsURL)
|
||||
setContributors((prev) => ({ ...prev, data }))
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
setContributors((prev) => ({ ...prev, error: 'There is an error' }))
|
||||
} finally {
|
||||
setContributors((prev) => ({ ...prev, loading: false }))
|
||||
}
|
||||
}
|
||||
fetchContributors()
|
||||
}, [])
|
||||
|
||||
if (contributors.data) {
|
||||
// remove bots from contributors list
|
||||
contributors.data = [...contributors.data].filter(
|
||||
({ type }) => type === 'User'
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
|
||||
crossOrigin="anonymous"
|
||||
/>
|
||||
</Head>
|
||||
<Script
|
||||
id="bootstrap-cdn"
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" />
|
||||
|
||||
<ContributorsStyle>
|
||||
<>
|
||||
<div className={styles.head}>CONTRIBUTORS</div>
|
||||
<div class="conatiner contributor-cards">
|
||||
<div className="contributor-cards row">
|
||||
{contributors.map((contributor) => {
|
||||
return (
|
||||
<div className="contributor-card col-3" key={contributor.id}>
|
||||
<div className="contributor-cardPointerStart">
|
||||
<div id="circle"></div>
|
||||
</div>
|
||||
<div id="ImageContainer">
|
||||
<Image
|
||||
src={contributor.profilepic}
|
||||
alt="Contributors Profile Picture"
|
||||
width={'100px'}
|
||||
height={'100px'}
|
||||
className="contributor-Pic"
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
|
||||
/>
|
||||
</div>
|
||||
<div id="contributorDetailsWrapper">
|
||||
<div className="contributor-Name">{contributor.name}</div>
|
||||
<div className="contributor-GithubUsername">
|
||||
<GitHub />
|
||||
<span id="username">{contributor.gitHubUsername}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ContributorsStyle className="conttt">
|
||||
<>
|
||||
<header>
|
||||
<h1 className={styles.head}>CONTRIBUTORS</h1>
|
||||
</header>
|
||||
{contributors.loading ? (
|
||||
<p className="contributors__loading">Loading...</p>
|
||||
) : contributors.error ? (
|
||||
<p className="contributors__loading">{contributors.error}</p>
|
||||
) : (
|
||||
<ul className="contributor-cards row">
|
||||
{contributors.data.map((contributor) => {
|
||||
return (
|
||||
<li
|
||||
className="contributor-card col-3 flex"
|
||||
key={contributor.id}
|
||||
>
|
||||
<span className="contributor__indicator"></span>
|
||||
<figure className="contributor__avatar flex">
|
||||
<Image
|
||||
src={contributor.avatar_url}
|
||||
width={100}
|
||||
height={100}
|
||||
alt={`${contributor.login}'s profile picture`}
|
||||
/>
|
||||
</figure>
|
||||
<p
|
||||
className="contributor__name ellipsis"
|
||||
title={contributor.login}
|
||||
>
|
||||
{contributor.login}
|
||||
</p>
|
||||
<p className="contributor__github flex">
|
||||
<a
|
||||
href={contributor.url}
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
className="contributor__github--link flex"
|
||||
>
|
||||
<GitHub className="contributor__github--icon" />
|
||||
<span
|
||||
id="username"
|
||||
className="contributor__github--username ellipsis"
|
||||
>
|
||||
@{contributor.login}
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</ul>
|
||||
)}
|
||||
</>
|
||||
</ContributorsStyle>
|
||||
</>
|
||||
|
|
|
@ -1,67 +1,124 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export default styled.section`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
.contributor-cards{
|
||||
display: flex;
|
||||
width: 85%;
|
||||
align-item: center;
|
||||
justify-content: center;
|
||||
margin:20px;
|
||||
margin-left: 6%
|
||||
padding-top: 6rem;
|
||||
|
||||
.contributors {
|
||||
&__loading {
|
||||
text-align: center;
|
||||
font-size: clamp(1.5rem, 2vw, 2.5rem);
|
||||
}
|
||||
.contributor-card {
|
||||
width: 240px;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
background-color: #ffffff;
|
||||
border-radius: 10px;
|
||||
margin: 15px;
|
||||
padding: 5px;
|
||||
}
|
||||
.contributor-cardPointerStart {
|
||||
width: 180px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
#circle {
|
||||
height: 10px;
|
||||
width: 10px;
|
||||
border-radius: 50%;
|
||||
background-color: green;
|
||||
}
|
||||
.contributor-Pic {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#ImageContainer {
|
||||
border-radius: 50%;
|
||||
border: 3px solid #35cdf0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.contributor-Name {
|
||||
color: #1d92e0;
|
||||
font-size: 25px;
|
||||
font-weight: bold;
|
||||
}
|
||||
#contributorDetailsWrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justfiy-content: flex-start;
|
||||
}
|
||||
.contributor-GithubUsername {
|
||||
display: flex;
|
||||
justify-content: baseline;
|
||||
font-size: 20px;
|
||||
}
|
||||
#username {
|
||||
color: grey;
|
||||
font-weight: bold;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.flex {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contributor {
|
||||
&-cards {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
gap: 2rem 1.6rem;
|
||||
max-width: 80rem;
|
||||
margin: 1rem auto 2rem;
|
||||
}
|
||||
|
||||
&-card {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: rgb(255, 255, 255);
|
||||
border-radius: 1rem;
|
||||
flex: 1 1 auto;
|
||||
max-width: 18rem;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
padding: 2.4rem 0.8rem;
|
||||
position: relative;
|
||||
transition: all 0.2s linear;
|
||||
transform: scale(0.97);
|
||||
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
box-shadow: 1px 1px 9px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:nth-child(3n-2) {
|
||||
.contributor__indicator {
|
||||
left: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3n-1) {
|
||||
.contributor__indicator {
|
||||
left: 48.5%;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
.contributor__indicator {
|
||||
right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
width: 0.6rem;
|
||||
height: 0.6rem;
|
||||
background: green;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&__avatar {
|
||||
border-radius: 50%;
|
||||
border: 3px solid rgb(53, 205, 240);
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
&__name {
|
||||
color: rgb(29, 146, 224);
|
||||
font-size: clamp(1.5rem, calc(4vw + 0.5em), 2.5rem);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__github {
|
||||
width: 100%;
|
||||
|
||||
&--link {
|
||||
width: 100%;
|
||||
transition: all 0.2s linear;
|
||||
transform: scale(0.95);
|
||||
max-width: max-content;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
text-shadow: 1px 1px black;
|
||||
}
|
||||
}
|
||||
|
||||
&--username {
|
||||
display: inline-block;
|
||||
margin-left: 0.2rem;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
|
|
@ -116,7 +116,8 @@ function Index(props) {
|
|||
</a>
|
||||
</MenuItem>
|
||||
<MenuItem onClick={handleCloseNavMenu}>
|
||||
<a href={NotFound}>
|
||||
<Link href="/contributors">
|
||||
<a>
|
||||
<Typography
|
||||
textAlign="center"
|
||||
variant="h6"
|
||||
|
@ -125,6 +126,7 @@ function Index(props) {
|
|||
CREDITS
|
||||
</Typography>
|
||||
</a>
|
||||
</Link>
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</Box>
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
module.exports = {
|
||||
reactStrictMode: true,
|
||||
images: {
|
||||
domains: ['avatars.githubusercontent.com'],
|
||||
},
|
||||
}
|
||||
|
|
|
@ -2,16 +2,21 @@
|
|||
font-family: 'Montserrat Alternates', sans-serif;
|
||||
color: #fff;
|
||||
/* text-shadow: 3px 2px 1px black; */
|
||||
margin-top: 100px;
|
||||
/* margin-top: 100px; */
|
||||
line-height: 1.15;
|
||||
font-size: 5.5rem;
|
||||
/* font-size: 5.5rem; */
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
font-size: clamp(1.8rem, calc(5vw + 1rem), 5.5rem);
|
||||
padding-left: 1.6rem;
|
||||
padding-right: 1.6rem;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.head {
|
||||
font-size: 2.5rem;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 100px;
|
||||
/* font-size: 2.5rem; */
|
||||
/* margin-top: 2em; */
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
|
3270
frontend/yarn.lock
3270
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue