fp/packages/next/app/components/contributors.tsx

33 lines
1.3 KiB
TypeScript
Raw Normal View History

2024-01-20 16:16:14 +00:00
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() {
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}</>
)
}