Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Contributors' data through GitHub API and Contributors' Card Design #13

Merged
merged 5 commits into from
Oct 28, 2022
Merged

Contributors' data through GitHub API and Contributors' Card Design #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e641790
Contributors data through GitHub API
BadgerBloke Oct 27, 2022
ba14b04
Contributor Cards Design Changed
BadgerBloke Oct 28, 2022
33ae2f9
Null handling for contributors data
BadgerBloke Oct 28, 2022
675f098
Tailwind Class made Important
BadgerBloke Oct 28, 2022
e148003
Link Icons will be hidden for null value
BadgerBloke Oct 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 61 additions & 43 deletions src/components/ContributeCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,81 @@
import React from "react";
import { FiLink, FiInstagram, FiMail } from "react-icons/fi";
import React, {useEffect, useState} from "react";
import { FiLink, FiMail, FiTwitter } from "react-icons/fi";

const ContributeCard = ({
image,
name,
github_link,
work,
email,
insta_link,
website_link,
url
}) => {
const [userData, setUserData] = useState({});

const getUserData = async (url) => {
const response = await fetch(`${url}`);
const data = await response.json();
setUserData(data);
}

useEffect(() => {
getUserData(url);
}, [url]);
return (
<div
className="gradient-shadow p-[4px] rounded-md transtion duration-500 cursor-pointer text-[#222] md:w-[40%] w-[80%] lg:w-[90%] xl:w-[90%] hover:border-[#3d5eff98] bg-gradient-3"
className="p-4 hover:shadow-2xl bg-white m-3 rounded-lg transition-all ease-in-out duration-300 cursor-pointer text-[#222] dark:bg-[#222222] border dark:border-[#444]"
data-aos="fade-left"
>
<div className="bg-white rounded-md p-[16px] dark:bg-[#222222]">
<img
src={image}
alt={name}
className="rounded-md w-full overflow-hidden transition duration-300"
src={userData.avatar_url}
alt={userData.name}
className="w-full overflow-hidden transition duration-300 rounded-md"
/>
<h1 className="text-[18px] leading-[1.1] lg:text-[24px] xl:text-[24px] md:text-[18px] font-semibold mt-2 capitalize font-Inter dark:text-[#fafafa] mb-[6px]">
{name}
<h1 className="text-2xl font-semibold font-Epilogue mt-2 capitalize dark:text-[#fafafa]">
{userData.name}
</h1>
<h3 className="lg:text-[18px] xl:text-[18px] md:text-[16px] font-medium capitalize font-Inter dark:text-[#eee]">
{work}
<h3 className="text-[14px] leading-[1.15] h-[50px] font-Epilogue text-[#666] dark:text-[#ccc]">
{userData.bio}
</h3>
<a
href={github_link}
href={userData.html_url}
className="text-[12px] lg:text-[14px] xl:text-[14px] overflow-ellipsis overflow-hidden font-Inter text-[#3d53ff] dark:text-blue-300 mb-[16px]"
target="_blank"
rel="noreferrer"
>
{github_link}
{userData.html_url}
</a>
<div className="flex items-center mt-[10px] gap-x-[10px]">
<a
href={email}
className="hover:text-[#999] dark:text-[#fafafa] dark:hover:text-[#ccc]"
target="_blank"
>
<FiMail className="text-[20px]" />
</a>
<a
href={website_link}
className="hover:text-[#999] dark:text-[#fafafa] dark:hover:text-[#ccc]"
target="_blank"
>
<FiLink className="text-[20px]" />
</a>
<a
href={insta_link}
className="hover:text-[#999] dark:text-[#fafafa] dark:hover:text-[#ccc]"
target="_blank"
>
<FiInstagram className="text-[20px]" />
</a>
</div>
<div className="flex items-center gap-3 pt-4">
{
userData.email && (
<a
href={`mailto:${userData.email}`}
className="dark:text-[#fafafa] hover:text-[#999] dark:hover:text-[#ccc]"
target="_blank"
rel="noreferrer noopener"
>
<FiMail className="text-[20px]" />
</a>
)
}
{
userData.blog && (
<a
href={userData.blog}
className="dark:text-[#fafafa] hover:text-[#999] dark:hover:text-[#ccc]"
target="_blank"
rel="noreferrer noopener"
>
<FiLink className="text-[20px]" />
</a>
)
}
{
userData.twitter_username && (
<a
href={`https://twitter.com/${userData.twitter_username}`}
className="dark:text-[#fafafa] hover:text-[#999] dark:hover:text-[#ccc]"
target="_blank"
rel="noreferrer noopener"
>
<FiTwitter className="text-[20px]" />
</a>
)
}
</div>
</div>
);
Expand Down
62 changes: 18 additions & 44 deletions src/containers/Contributors.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,19 @@
import React from "react";
import {useEffect, useState} from "react";
import DesignserLobbyBanner from "../components/DesignserLobbyBanner";
import ContributeCard from "../components/ContributeCard";
import { ContributeBanner, ResourceContributors } from "../components";

const Contributors = () => {
const contributordata = [
{
image: "https://avatars.githubusercontent.com/u/77439529?v=4",
name: "Nitin Singh",
github_link: "https://github.com/singhnitin77",
work: "Full Stack Dev & UI/UX Designer",
email: "mailto:thenitinsingh77@gmail.com",
insta_link: "https://www.instagram.com/thenitinsingh7/",
website_link: "https://www.thenitinsingh.com/",
},
{
image: "https://avatars.githubusercontent.com/u/77439529?v=4",
name: "Bharat Kumar",
github_link: "https://github.com/Bharat-kr",
work: "Full Stack Web Developer",
email: "mailto: kumarbharat661@gmail.com",
insta_link: "https://www.instagram.com/bharatkr_15/",
website_link: "https://bharat-kr.github.io/Profile/",
},
{
image: "https://avatars.githubusercontent.com/u/77439529?v=4",
name: "Prashant kumar",
github_link: "https://github.com/devprashantt",
work: "Android & Web Developer",
email: "mailto:officialprashanttt@gmail.com",
insta_link: "https://www.instagram.com/king11prashant11/",
website_link: "https://prashant-kumar.herokuapp.com/",
},
];
const [contributors, setContributors] = useState([]);
const getContributors = async () => {
const response = await fetch("https://api.github.com/repos/singhnitin77/DesignersLobby/contributors");
const data = await response.json();
setContributors(data);
}

useEffect(() => {
getContributors();
}, []);

const resourcecontributors = [
{
Expand Down Expand Up @@ -88,7 +69,7 @@ A big thanks to all the contributors who helped Designers Lobby and the Design c

<div className="flex justify-center w-full">
<div className="w-10/12 py-2">
<div className="w-full flex px-3 my-2 mt-3 items-center">
<div className="flex items-center w-full px-3 my-2 mt-3">
<div className="w-4/12 mx-auto h-[2px] rounded-sm bg-[#ddd] bg-gradient-3"></div>
<h3 className="mx-2 text-[#3d53ff] capitalize font-bold text-lg w-auto dark:text-white">
Github Contributors
Expand All @@ -99,22 +80,15 @@ A big thanks to all the contributors who helped Designers Lobby and the Design c
</div>

{/* Contributors card */}
<div className="px-[40px] my-[24px] w-full sm:w-full md:w-[70%] lg:w-[75%] xl:w-[75%] mx-auto">
<div className="flex flex-col gap-y-[24px] items-center sm:flex-col md:flex-row lg:flex-row xl:flex-row justify-between lg:gap-x-4 md:gap-x-3 xl:gap-x-4">
{contributordata.map((person, i) => {
return (
<div className="w-full h-full py-[72px] md:py-[80px] lg:py-[100px] px-[60px] dark:bg-[#333333]">
<div className="grid lg:grid-cols-4 gap-x-4">
{contributors?.length > 0 && contributors.map((person, i) => (
<ContributeCard
image={person.image}
name={person.name}
github_link={person.github_link}
work={person.work}
email={person.email}
website_link={person.website_link}
insta_link={person.insta_link}
url={person.url}
key={i}
/>
);
})}
)
)}
</div>
</div>

Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ const colors = require("tailwindcss/colors");
module.exports = {
darkMode: "class",
content: ["./src/**/*.{js,jsx,ts,tsx}"],
important: true,
theme: {
fontFamily: {
Inter: ["Inter", "sans-serif"],
Expand Down