Skip to content

Commit

Permalink
fix: integrate developer data from github API
Browse files Browse the repository at this point in the history
  • Loading branch information
@Arxeno
Arxeno committed Dec 7, 2023
1 parent 96391f2 commit d2fcbef
Show file tree
Hide file tree
Showing 5 changed files with 175 additions and 207 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ yarn-debug.log*
yarn-error.log*

# local env files
.env
.env*.local

# vercel
Expand Down
51 changes: 39 additions & 12 deletions src/app/components/ContributorsCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,40 @@
export default function ContributorsCard({url, name, role} : any) : JSX.Element {
return (
<div className="flex items-start gap-2.5
import Image from "next/image";
import { Contributors } from "../type";

interface Props {
contributor: Contributors;
}

export default function ContributorsCard({ contributor }: Props): JSX.Element {
return (
<div
className="flex w-[376px] items-start gap-2.5
shadow-[0px_4px_8px_0px_rgba(0,0,0,0.20)] sm:px-5 px-3 sm:py-4 py-2.5 rounded-[20px]
sm:max-w-[376px] max-w-[304px] sm:max-h-[138px] max-h-[100px]">
<div className="sm:w-[160px] w-[120px] sm:h-[106px] h-[80px]" style={{background:`url(${url})`}}></div>
<div className="flex flex-col max-w-[166px]">
<p className="font-bold text-base text-[#45349F]">{name}</p>
<p className="font-normal text-base text-[#45349F]">{role}</p>
</div>
</div>
)
}
sm:max-w-[376px] max-w-[304px] sm:max-h-[138px] max-h-[100px]"
>
{/* <div
className="sm:w-[160px] w-[120px] sm:h-[106px] h-[80px]"
style={{ background: `url(${contributors.avatar_url})` }}
></div> */}
{/* <Image
src={contributors.avatar_url}
alt={`${contributors.login}'s profile picture`}
width={460}
height={460}
/> */}

<img
src={contributor.avatar_url}
alt={`${contributor.login}'s profile picture`}
className="sm:w-[105px] w-[80px]"
></img>

<div className="flex flex-col max-w-[166px]">
<p className="font-bold text-base text-[#45349F]">
{contributor.login}
</p>
{/* <p className="font-normal text-base text-[#45349F]">{role}</p> */}
</div>
</div>
);
}
192 changes: 69 additions & 123 deletions src/app/components/Modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,131 +1,77 @@
import { useEffect, useState } from "react";
import ContributorsCard from "./ContributorsCard";
import { Contributors } from "../type";

interface Contributors {
url : string,
name : string,
role : string
}

export default function Modal(props : any) : JSX.Element {

const susunJadwal : Contributors[] = [
{
url:"/images/placeholder.png",
name:"Tukang Susun Jadwal",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Susun Jadwal",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Susun Jadwal",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Susun Jadwal",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Susun Jadwal",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Susun Jadwal",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Susun Jadwal",
role:"Designer"
}
]

const bikunTracker : Contributors[] = [
{
url:"/images/placeholder.png",
name:"Tukang Bikun Tracker",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Bikun Tracker",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Bikun Tracker",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Bikun Tracker",
role:"Designer"
}
]
export default function Modal(props: any): JSX.Element {
const [contributors, setContributors] = useState<Contributors[] | null>(null);

const ristekLink : Contributors[] = [
{
url:"/images/placeholder.png",
name:"Tukang Ristek Link",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Ristek Link",
role:"Designer"
},
{
url:"/images/placeholder.png",
name:"Tukang Ristek Link",
role:"Designer"
}
]
useEffect(() => {
const options: RequestInit = {
method: "GET",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${process.env.NEXT_PUBLIC_AUTH_TOKEN}`,
},
};

const ulasKelas : Contributors[] = [
{
url:"/images/placeholder.png",
name:"Tukang Ulas Kelas",
role:"Designer"
}
]

let app;

if (props.modalApp === 'Susun Jadwal') {
app = susunJadwal
} else if (props.modalApp === 'Bikun Tracker') {
app = bikunTracker
} else if (props.modalApp === 'Ristek Link') {
app = ristekLink
} else {
app = ulasKelas
if (props.modalApp === "Susun Jadwal") {
fetch(
`${process.env.NEXT_PUBLIC_GITHUB_API_URL}/repos/ristekoss/susunjadwal-frontend/contributors`,
options
)
.then((res) => res.json())
.then(async (resJson) => setContributors(resJson));
} else if (props.modalApp === "Bikun Tracker") {
} else if (props.modalApp === "Ristek Link") {
fetch(
`${process.env.NEXT_PUBLIC_GITHUB_API_URL}/repos/ristekoss/ristek-link/contributors`,
options
)
.then((res) => res.json())
.then((resJson) => setContributors(resJson));
} else if (props.modalApp === "Ulas Kelas") {
fetch(
`${process.env.NEXT_PUBLIC_GITHUB_API_URL}/repos/ristekoss/ulaskelas-frontend/contributors`,
options
)
.then((res) => res.json())
.then((resJson) => setContributors(resJson));
}
}, [props.modalApp]);

return (
<div className="fade fixed mt-[64px] flex flex-col items-center sm:gap-[20px] md:gap-[40px] gap-[12px] sm:p-[40px] md:p-[60px] p-[20px] w-[90%] sm:max-h-[564px] max-h-[80%] rounded-[20px] bg-white">
<div className="flex flex-row w-full justify-between">
<img src={"/icons/cross_box.svg"} className="invisible lg:block hidden"></img>
<p className="font-bold lg:text-[60px] sm:text-[36px] text-[24px]">
People Behind This Product!
</p>
<img src={"/icons/cross_box.svg"} onClick={() => props.modal()} className="cursor-pointer"></img>
</div>
<div className="flex flex-wrap gap-[20px] w-full justify-center overflow-auto
return (
<div className="fade fixed mt-[64px] flex flex-col items-center sm:gap-[20px] md:gap-[40px] gap-[12px] sm:p-[40px] md:p-[60px] p-[20px] w-[90%] sm:max-h-[564px] max-h-[80%] rounded-[20px] bg-white">
<div className="flex flex-row w-full justify-between">
<img
src={"/icons/cross_box.svg"}
className="invisible lg:block hidden"
></img>
<p className="font-bold lg:text-[60px] sm:text-[36px] text-[24px]">
People Behind This Product!
</p>
<img
src={"/icons/cross_box.svg"}
onClick={() => props.modal()}
className="cursor-pointer"
></img>
</div>
<div
className="flex flex-wrap gap-[20px] w-full justify-center overflow-auto
pt-[8px] pb-[8px]
sm:pl-0 pl-[8px]
sm:pr-0 pr-[8px]">
{app.map((contributors, index) => {
return (
<ContributorsCard url={contributors.url} name={contributors.name} role={contributors.role} key={index}/>
)
})}
</div>
</div>
)
}
sm:pr-0 pr-[8px]"
>
{contributors
? contributors.map((contributor, index) => {
return (
<ContributorsCard
contributor={contributor}
key={index}
/>
);
})
: null}
</div>
</div>
);
}
Loading

0 comments on commit d2fcbef

Please sign in to comment.