Skip to content

Commit 4d4a3fc

Browse files
jsvigneshkannajsvigneshkanna
authored
Merge pull request #245 from AnnieDebbie/D.A-Contributors
Create contributors page
2 parents 54a89db + f358edb commit 4d4a3fc

File tree

6 files changed

+203
-23
lines changed

6 files changed

+203
-23
lines changed

‎components/aboutUs.js‎

Lines changed: 23 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,25 @@
22
import {useState, useEffect} from "react";
33
import {BallTriangle} from "react-loader-spinner";
44
import {SiBuymeacoffee} from "react-icons/si";
5+
import Link from "next/link";
56

67
const AboutUs = () => {
78
const [loading, setloading] = useState(true);
89
useEffect(() => {
910
setTimeout(() => {
1011
setloading(false);
11-
fetch(
12-
"https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors",
13-
)
14-
.then((res) => res.json())
15-
.then((res) => {
16-
if (document.getElementById("contributors").innerHTML == "") {
17-
for (var xx = 0; xx < res.length; xx++) {
18-
document.getElementById(
19-
"contributors",
20-
).innerHTML += ` <a href="https://github.com/${res[xx].login}" target="_blank" rel="noreferrer" class=" overflow-hidden flex flex-col justify-evenly w-28 m-4"><img class="inline rounded-full"
21-
src="${res[xx].avatar_url}"
22-
alt=""/><span
23-
class="text-white"><div class="w-full text-center mt-4">${res[xx].login}</div></span></a>`;
24-
}
25-
}
26-
});
2712
}, 600);
2813
}, []);
14+
// fetch('https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors').then(res => res.json()).then(res => {
15+
// if (document.getElementById('contributors').innerHTML == "") {
16+
// for (var xx = 0; xx < res.length; xx++) {
17+
// document.getElementById('contributors').innerHTML += ` <a href="${res[xx].url}" class=" overflow-hidden flex flex-col justify-evenly w-28 m-4"><img class="inline rounded-full"
18+
// src="${res[xx].avatar_url}"
19+
// alt=""/><span
20+
// class="text-white"><div class="w-full text-center">${res[xx].login}</div></span></a>`
21+
// }
22+
// }
23+
// })
2924

3025
return (
3126
<div>
@@ -93,13 +88,18 @@ const AboutUs = () => {
9388
</div>
9489
<div>
9590
<div className="flex flex-col justify-center items-center flex-wrap">
96-
<div className=" my-5 mx-3 p-6 flex flex-col justify-center items-center md:w-4/5 md:mx-0p-6 px-5 overflow-auto border-blue-700 border-2 rounded-lg">
97-
<p className=" mt-8 mb-8 text-xl text-white underline underline-offset-4">
98-
Our Contributers 🥂
99-
</p>
100-
<div
101-
id="contributors"
102-
className="overflow-auto whitespace-nowrap w-auto flex flex-wrap justify-evenly gap-1 md:gap-8"></div>
91+
<div className=" my-5 mx-3 p-6 flex flex-col justify-center items-center md:w-4/5 md:mx-0p-6 px-5 overflow-auto border-blue-700 border-2 rounded-lg bg-sky-300">
92+
<Link href="/contributors" className="cursor-pointer">
93+
<p className=" text-xl font-bold underline underline-offset-4 text-blue-700 mb-4">
94+
Check out our cool contributors
95+
</p>
96+
<hr className="bg-white" />
97+
<p className="w-full text-center text-blue-900 font-semibold flex flex-col md:flex-row justify-center items-center">
98+
We currently have around 50+ open source contributors who have contributed in codebase through different ways from
99+
correcting the UI components to adding this whole new link ❤️‍🔥. Check our contributors in next page, and you too can
100+
become a part of our cool 🥸 community.
101+
</p>
102+
</Link>
103103
</div>
104104
</div>
105105
</div>

‎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 border-orange-200 md:w-56 md:border md:rounded-2xl 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: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import {useState, useEffect} from "react";
2+
import Contributor from "./contributor";
3+
import {BallTriangle} from "react-loader-spinner";
4+
5+
const Contributors = () => {
6+
const [loading, setloading] = useState(true);
7+
const [contributors, setContributors] = useState([]);
8+
9+
useEffect(() => {
10+
setTimeout(() => {
11+
setloading(false);
12+
}, 600);
13+
14+
fetch(
15+
"https://api.github.com/repos/jsvigneshkanna/tailwind_ui_components/contributors",
16+
)
17+
.then((res) => res.json())
18+
.then((contributors) => setContributors(contributors));
19+
}, []);
20+
21+
return (
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="mx-4 md:mx-40">
42+
<p className="text-3xl text-white font-bold text-center ">Our contributors:</p>
43+
<div className="p-6 px-5"></div>
44+
<div
45+
id="contributors"
46+
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 ">
47+
{contributors.map((contributor, idx) => (
48+
<Contributor key={idx} contributor={contributor} />
49+
))}
50+
</div>
51+
</div>
52+
</div>
53+
)}
54+
</div>
55+
);
56+
};
57+
58+
export default Contributors;

‎components/navbar.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ const Navbar = () => {
4949
<p>{isMenuOpen ? <AiOutlineClose /> : <MdMenu />}</p>
5050
</div>
5151
</nav>
52+
5253
<div className={displayMenu()}>
5354
<div className="nav_links">
5455
<Link href="/components">Components</Link>

‎pages/aboutUs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import Navbar from "../components/navbar";
44
import AboutUs from "../components/aboutUs";
55
import Footer from "../components/footer";
66
import SocialButtons from "../components/socialbuttons";
7+
import Contributors from "../components/contributors";
78

89
export default function Home() {
910
return (

‎pages/contributors.js‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
import Head from "next/head";
2+
3+
import Navbar from "../components/navbar";
4+
import Footer from "../components/footer";
5+
import SocialButtons from "../components/socialbuttons";
6+
import Contributors from "../components/contributors";
7+
8+
export default function Home() {
9+
return (
10+
<>
11+
<Head>
12+
<title>Tailwind Bootstrap | Contributors</title>
13+
<link rel="icon" href="/favi-tailwind.png" type="image/png" />
14+
<link
15+
rel="stylesheet"
16+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
17+
/>
18+
<meta name="title" content="Tailwind Bootstrap" />
19+
<meta name="description" content="TailwindCSS ui component bootstrap" />
20+
21+
<meta property="og:type" content="website" />
22+
<meta
23+
property="og:url"
24+
content="https://tailwindcsscomponents.vercel.app/"
25+
/>
26+
<meta property="og:title" content="Tailwind Bootstrap" />
27+
<meta
28+
property="og:description"
29+
content="TailwindCSS ui component bootstrap"
30+
/>
31+
32+
<meta
33+
property="twitter:url"
34+
content="https://tailwindcsscomponents.vercel.app/"
35+
/>
36+
<meta property="twitter:title" content="Tailwind Bootstrap" />
37+
<meta
38+
property="twitter:description"
39+
content="TailwindCSS ui component bootstrap"
40+
/>
41+
</Head>
42+
43+
<div className=" bg-slate-100 w-full min-h-screen font-poppins">
44+
<Navbar />
45+
<Contributors />
46+
<div className="social_buttons">
47+
<SocialButtons />
48+
</div>
49+
<Footer />
50+
</div>
51+
</>
52+
);
53+
}

0 commit comments

Comments
 (0)