Skip to content

Commit db8125b

Browse files
AnnieDebbieAnnieDebbie
committed
Feat: Finish contributors page
Style contributors page for mobile and desktop Add loading state
1 parent 3bef89c commit db8125b

File tree

4 files changed

+112
-65
lines changed

4 files changed

+112
-65
lines changed

‎components/aboutUs.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import Link from "next/link";
55

66
const AboutUs = () => {
77
const [loading, setloading] = useState(true);
8-
// useEffect(() => {
9-
// setTimeout(() => {
10-
// setloading(false);
11-
// }, 600);
12-
// }, []);
8+
useEffect(() => {
9+
setTimeout(() => {
10+
setloading(false);
11+
}, 600);
12+
}, []);
1313
// fetch('https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors').then(res => res.json()).then(res => {
1414
// if (document.getElementById('contributors').innerHTML == "") {
1515
// for (var xx = 0; xx < res.length; xx++) {

‎components/contributor.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import {useEffect, useState} from "react";
2+
3+
function Contributor(props) {
4+
const [socials, setSocials] = useState({});
5+
6+
useEffect(() => {
7+
fetch(`https://api.github.com/users/${props.contributor.login}`)
8+
.then((res) => res.json())
9+
.then((contributor) => setSocials(contributor));
10+
}, []);
11+
12+
return (
13+
<div className="flex items-center gap-4 p-4 border border-x-0 border-t-0 mb-4 md:w-56 md:border border-gray-200 md:p-3 md:m-4 md:flex-col">
14+
<img
15+
className=" w-12 h-12 rounded-full md:w-28 md:h-28"
16+
src={socials.avatar_url}
17+
alt="contributor-logo"
18+
/>
19+
<span className="md:flex text-xl font-bold text-white md:flex-col md:items-center">
20+
<div className="">{socials.login}</div>
21+
22+
<div className="md:flex flex flex-row">
23+
<a href={socials.url}>
24+
<svg
25+
fill="#FFFFFF"
26+
xmlns="http://www.w3.org/2000/svg"
27+
viewBox="0 0 30 30"
28+
width="30px"
29+
height="30px">
30+
{" "}
31+
<path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z" />
32+
</svg>
33+
</a>
34+
{socials["twitter-username"] && (
35+
<a href={`https://twitter.com/${socials["twitter-username"]}`}>
36+
<svg
37+
fill="#FFFFFF"
38+
xmlns="http://www.w3.org/2000/svg"
39+
viewBox="0 0 30 30"
40+
width="30px"
41+
height="30px">
42+
{" "}
43+
<path d="M28,6.937c-0.957,0.425-1.985,0.711-3.064,0.84c1.102-0.66,1.947-1.705,2.345-2.951c-1.03,0.611-2.172,1.055-3.388,1.295 c-0.973-1.037-2.359-1.685-3.893-1.685c-2.946,0-5.334,2.389-5.334,5.334c0,0.418,0.048,0.826,0.138,1.215 c-4.433-0.222-8.363-2.346-10.995-5.574C3.351,6.199,3.088,7.115,3.088,8.094c0,1.85,0.941,3.483,2.372,4.439 c-0.874-0.028-1.697-0.268-2.416-0.667c0,0.023,0,0.044,0,0.067c0,2.585,1.838,4.741,4.279,5.23 c-0.447,0.122-0.919,0.187-1.406,0.187c-0.343,0-0.678-0.034-1.003-0.095c0.679,2.119,2.649,3.662,4.983,3.705 c-1.825,1.431-4.125,2.284-6.625,2.284c-0.43,0-0.855-0.025-1.273-0.075c2.361,1.513,5.164,2.396,8.177,2.396 c9.812,0,15.176-8.128,15.176-15.177c0-0.231-0.005-0.461-0.015-0.69C26.38,8.945,27.285,8.006,28,6.937z" />
44+
</svg>
45+
</a>
46+
)}
47+
48+
{socials["blog"] && (
49+
<a href={`${socials["blog"]}`}>
50+
<svg
51+
fill="#FFFFFF"
52+
xmlns="http://www.w3.org/2000/svg"
53+
viewBox="0 0 30 30"
54+
width="30px"
55+
height="30px">
56+
{" "}
57+
<path d="M 6 4 C 4.895 4 4 4.895 4 6 L 4 24 C 4 25.105 4.895 26 6 26 L 24 26 C 25.105 26 26 25.105 26 24 L 26 6 C 26 4.895 25.105 4 24 4 L 6 4 z M 12.308594 8 L 15 8 C 17.38 8 19.325594 9.9567969 19.308594 12.341797 C 19.303594 12.923797 19.802766 13.384766 20.384766 13.384766 L 20.923828 13.384766 C 21.518828 13.384766 22 13.867891 22 14.462891 L 22 17.691406 C 22 20.061406 20.061406 22 17.691406 22 L 12.306641 22 C 9.9376406 22 8 20.061406 8 17.691406 L 8 15 L 8 12.308594 C 8 9.9385938 9.9385938 8 12.308594 8 z M 12.308594 11.230469 C 11.716594 11.230469 11.230469 11.716594 11.230469 12.308594 C 11.230469 12.900594 11.716594 13.384766 12.308594 13.384766 L 15 13.384766 C 15.592 13.384766 16.076172 12.900594 16.076172 12.308594 C 16.076172 11.716594 15.592 11.230469 15 11.230469 L 12.308594 11.230469 z M 12.306641 16.615234 C 11.714641 16.615234 11.230469 17.099406 11.230469 17.691406 C 11.230469 18.283406 11.714641 18.769531 12.306641 18.769531 L 17.691406 18.769531 C 18.283406 18.769531 18.769531 18.283406 18.769531 17.691406 C 18.769531 17.099406 18.284406 16.615234 17.691406 16.615234 L 12.306641 16.615234 z" />
58+
</svg>
59+
</a>
60+
)}
61+
</div>
62+
</span>
63+
</div>
64+
);
65+
}
66+
67+
export default Contributor;

‎components/contributors.js‎

Lines changed: 40 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,58 @@
11
import {useState, useEffect} from "react";
2+
import Contributor from "./contributor";
3+
import {BallTriangle} from "react-loader-spinner";
24

35
const Contributors = () => {
46
const [loading, setloading] = useState(true);
7+
const [contributors, setContributors] = useState([]);
58

69
useEffect(() => {
710
setTimeout(() => {
811
setloading(false);
912
}, 600);
10-
}, []);
1113

12-
(async () => {
13-
const contributors = await fetch(
14+
fetch(
1415
"https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors",
15-
);
16-
17-
const data = await contributors.json();
18-
console.log(data);
19-
const username = data.forEach((contributor) => {
20-
fetch(`https://api.github.com/${contributor}`)
21-
.then((res) => res.json())
22-
.then((res) => console.log(res));
23-
});
24-
25-
if (document.getElementById("contributors").innerHTML == "") {
26-
data.forEach((contributor) => {
27-
// console.log(contributor);
28-
document.getElementById(
29-
"contributors",
30-
).innerHTML += `<div class="flex items-center gap-4 p-4 md:border md:border-gray-200 md:flex md:p-3 md:w-48 md:m-4">
31-
<img class=" w-12 h-12 rounded-full md:w- md:h-" src="${contributor.avatar_url}"alt="contributor-logo"/>
32-
<span class="flex text-xl font-bold text-white md:flex-col">
33-
<div class="">${contributor.login}</div>
34-
<a href=${contributor.url}>
35-
<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"> <path d="M15,3C8.373,3,3,8.373,3,15c0,5.623,3.872,10.328,9.092,11.63C12.036,26.468,12,26.28,12,26.047v-2.051 c-0.487,0-1.303,0-1.508,0c-0.821,0-1.551-0.353-1.905-1.009c-0.393-0.729-0.461-1.844-1.435-2.526 c-0.289-0.227-0.069-0.486,0.264-0.451c0.615,0.174,1.125,0.596,1.605,1.222c0.478,0.627,0.703,0.769,1.596,0.769 c0.433,0,1.081-0.025,1.691-0.121c0.328-0.833,0.895-1.6,1.588-1.962c-3.996-0.411-5.903-2.399-5.903-5.098 c0-1.162,0.495-2.286,1.336-3.233C9.053,10.647,8.706,8.73,9.435,8c1.798,0,2.885,1.166,3.146,1.481C13.477,9.174,14.461,9,15.495,9 c1.036,0,2.024,0.174,2.922,0.483C18.675,9.17,19.763,8,21.565,8c0.732,0.731,0.381,2.656,0.102,3.594 c0.836,0.945,1.328,2.066,1.328,3.226c0,2.697-1.904,4.684-5.894,5.097C18.199,20.49,19,22.1,19,23.313v2.734 c0,0.104-0.023,0.179-0.035,0.268C23.641,24.676,27,20.236,27,15C27,8.373,21.627,3,15,3z"/></svg>
36-
</a>
37-
<a href=${contributor.url}>
38-
<svg fill="#FFFFFF" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" width="30px" height="30px"> <path d="M28,6.937c-0.957,0.425-1.985,0.711-3.064,0.84c1.102-0.66,1.947-1.705,2.345-2.951c-1.03,0.611-2.172,1.055-3.388,1.295 c-0.973-1.037-2.359-1.685-3.893-1.685c-2.946,0-5.334,2.389-5.334,5.334c0,0.418,0.048,0.826,0.138,1.215 c-4.433-0.222-8.363-2.346-10.995-5.574C3.351,6.199,3.088,7.115,3.088,8.094c0,1.85,0.941,3.483,2.372,4.439 c-0.874-0.028-1.697-0.268-2.416-0.667c0,0.023,0,0.044,0,0.067c0,2.585,1.838,4.741,4.279,5.23 c-0.447,0.122-0.919,0.187-1.406,0.187c-0.343,0-0.678-0.034-1.003-0.095c0.679,2.119,2.649,3.662,4.983,3.705 c-1.825,1.431-4.125,2.284-6.625,2.284c-0.43,0-0.855-0.025-1.273-0.075c2.361,1.513,5.164,2.396,8.177,2.396 c9.812,0,15.176-8.128,15.176-15.177c0-0.231-0.005-0.461-0.015-0.69C26.38,8.945,27.285,8.006,28,6.937z"/></svg>
39-
</a>
40-
</span>
41-
</div>`;
42-
43-
// `<a href="${contributor.url}" class="md:border md:border-gray-200 flex md:flex-col items-center md:p-3 md:w-48 md:m-4 ">
44-
// <img class=" inline rounded-full" src="${contributor.avatar_url}"alt="contributor-logo"/>
45-
// <span class=" md:flex-col text-xl font-bold text-white">
46-
// <div class="flex-wrap w-full mt-2 ">${contributor.login}</div>
47-
// </span>
48-
// </a>`;
49-
});
50-
}
51-
})();
16+
)
17+
.then((res) => res.json())
18+
.then((contributors) => setContributors(contributors));
19+
}, []);
5220

5321
return (
54-
<div className="banner">
55-
<div className="banner_container">
56-
<div>
57-
<p className=" mt-8 text-xl text-white font-bold">
58-
Our contributors:
59-
</p>
60-
<div className="p-6 px-5"></div>
61-
<div
62-
id="contributors"
63-
className="overflow-y-auto relative max-w-sm mx-auto dark:bg-slate-800 dark:highlight-white/5 shadow-lg ring-1 ring-black/5 rounded-xl flex flex-col divide-y dark:divide-slate-200/5 md:flex-col md:flex-wrap md:justify-evenly ">
64-
{/*
65-
overflow-auto w-auto flex flex-wrap justify-evenly">
66-
className="overflow-auto whitespace-nowrap w-auto flex md:flex-col md:flex-wrap md:justify-evenly border-white border-2 rounded"*/}
22+
<div>
23+
{loading ? (
24+
<div
25+
style={{
26+
height: "100vh",
27+
backgroundColor: "rgba(0,0,0,0.99)",
28+
display: "flex",
29+
justifyContent: "center",
30+
}}
31+
className="banner">
32+
<BallTriangle
33+
height="100"
34+
width="100"
35+
color="#e39a09"
36+
ariaLabel="loading"
37+
/>
38+
</div>
39+
) : (
40+
<div className="banner">
41+
<div className="banner_container">
42+
<div>
43+
<p className="text-3xl text-white font-bold">Our contributors:</p>
44+
<div className="p-6 px-5"></div>
45+
<div
46+
id="contributors"
47+
className="max-w-sm relative mx-auto dark:highlight-white/5 shadow-lg ring-1 ring-black/5 rounded-xl flex flex-col md:max-w-5xl md:overflow-auto md:w-auto md:flex md:flex-row md:flex-wrap md:justify-evenly ">
48+
{contributors.map((contributor, idx) => (
49+
<Contributor key={idx} contributor={contributor} />
50+
))}
51+
</div>
52+
</div>
6753
</div>
6854
</div>
69-
</div>
55+
)}
7056
</div>
7157
);
7258
};

‎components/navbar.js‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,6 @@ const Navbar = () => {
4040
<div className="nav_links">
4141
<Link href="/aboutUs">About Us</Link>
4242
</div>
43-
<div className="nav_links">
44-
<Link href="/contributors">Our contributors</Link>
45-
</div>
4643
</div>
4744
<div className="flex sm:hidden hamburger" onClick={showMenu}>
4845
<p>{isMenuOpen ? <AiOutlineClose /> : <MdMenu />}</p>
@@ -59,9 +56,6 @@ const Navbar = () => {
5956
<div className="nav_links">
6057
<Link href="/aboutUs">About Us</Link>
6158
</div>
62-
<div className="nav_links">
63-
<Link href="/contributors">Our contributors</Link>
64-
</div>
6559
</div>
6660
</div>
6761
);

0 commit comments

Comments
 (0)