wehub-resource-sync
58 lines
1.9 KiB
TypeScript
58 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import type { Contributor } from "@/lib/contributors";
|
|
|
|
function ContributorAvatar({ c }: { c: Contributor }) {
|
|
const [hovered, setHovered] = useState(false);
|
|
|
|
return (
|
|
<a
|
|
href={c.html_url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="landing-contributor-avatar"
|
|
data-stagger
|
|
onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}
|
|
>
|
|
<img
|
|
src={c.avatar_url}
|
|
alt={c.login}
|
|
width={64}
|
|
height={64}
|
|
loading="lazy"
|
|
className="block w-full h-full object-cover"
|
|
/>
|
|
<span className={`landing-contributor-tooltip${hovered ? " is-visible" : ""}`}>
|
|
<span className="landing-contributor-tooltip-name">{c.login}</span>
|
|
<span className="landing-contributor-tooltip-count">{c.contributions} contributions</span>
|
|
</span>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
export function ContributorsWallContent({ contributors, title, desc }: { contributors: Contributor[]; title: string; desc: string }) {
|
|
if (contributors.length === 0) return null;
|
|
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-[minmax(220px,0.42fr)_minmax(0,0.58fr)] gap-9 items-end mb-[22px] max-[760px]:block">
|
|
<h2 className="m-0 text-[25px] font-[720] text-landing-ink">{title}</h2>
|
|
<p className="mt-2 max-w-[650px] text-landing-muted text-sm leading-[1.65] justify-self-end text-right max-[760px]:max-w-none max-[760px]:text-left">
|
|
{desc}{" "}
|
|
<Link href="https://github.com/t8y2/dbx/graphs/contributors" target="_blank" className="landing-inline-link inline-flex items-center gap-[5px]">
|
|
{contributors.length}+ contributors on GitHub
|
|
</Link>
|
|
</p>
|
|
</div>
|
|
<div className="landing-contributor-grid">
|
|
{contributors.map((c) => (
|
|
<ContributorAvatar key={c.login} c={c} />
|
|
))}
|
|
</div>
|
|
</>
|
|
);
|
|
}
|