import Skeleton, { SkeletonTheme } from "react-loading-skeleton"; import { getContributors } from "../lib/contributors"; import Link from 'next/link'; import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; export default async function Contributors() { try { const contributors = await getContributors(); if (!contributors || contributors.length < 1) return ( <SkeletonTheme baseColor="#000" highlightColor="#000" width="25%"> <Skeleton count={1} enableAnimation={false} /> </SkeletonTheme> ) const contributorList = contributors.map((contributor, index) => ( <span key={index}> {contributor.attributes.url ? ( <Link href={contributor.attributes.url} target="_blank"> <span className="mr-1">{contributor.attributes.name}</span> <FontAwesomeIcon icon={faExternalLinkAlt} className="fab fa-external-link-alt" ></FontAwesomeIcon> </Link> ) : ( contributor.attributes.name )} {index !== contributors.length - 1 ? ", " : ""} </span> )); return ( <>{contributorList}</> ) } catch (e) { if (e instanceof Error) { console.error(e) } return <p>Failed to fetch contributor list</p> } }