xstefen/OpenCut
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update contributors display to show top two contributors

Browse Source
This commit is contained in:
Maze Winther
2025-06-25 21:43:34 +02:00
parent 777b0f7000
commit e1481391c7
1 changed files with 46 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
apps/web/src/app/contributors/page.tsx
View File

@ -61,8 +61,8 @@ async function getContributors(): Promise<Contributor[]> {
export default async function ContributorsPage() { export default async function ContributorsPage() {
const contributors = await getContributors(); const contributors = await getContributors();
const topContributor = contributors[0]; const topContributors = contributors.slice(0, 2);
const otherContributors = contributors.slice(1); const otherContributors = contributors.slice(2);
return ( return (
<div className="min-h-screen bg-background"> <div className="min-h-screen bg-background">
@ -105,54 +105,59 @@ export default async function ContributorsPage() {
</div> </div>
</div> </div>
{topContributor && ( {topContributors.length > 0 && (
<div className="mb-20"> <div className="mb-20">
<div className="text-center mb-12"> <div className="text-center mb-12">
<h2 className="text-2xl font-semibold mb-2"> <h2 className="text-2xl font-semibold mb-2">
Top Contributor Top Contributors
</h2> </h2>
<p className="text-muted-foreground"> <p className="text-muted-foreground">
Leading the way in contributions Leading the way in contributions
</p> </p>
</div> </div>
<Link <div className="flex flex-col md:flex-row gap-6 justify-center max-w-4xl mx-auto">
href={topContributor.html_url} {topContributors.map((contributor, index) => (
target="_blank" <Link
rel="noopener noreferrer" key={contributor.id}
className="group block" href={contributor.html_url}
> target="_blank"
<div className="relative mx-auto max-w-md"> rel="noopener noreferrer"
<div className="absolute inset-0 bg-gradient-to-r from-muted/50 to-muted/30 rounded-2xl blur group-hover:blur-md transition-all duration-300" /> className="group block flex-1"
<Card className="relative bg-background/80 backdrop-blur-sm border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl"> >
<CardContent className="p-8 text-center"> <div className="relative mx-auto max-w-md">
<div className="relative mb-6"> <div className="absolute inset-0 bg-gradient-to-r from-muted/50 to-muted/30 rounded-2xl blur group-hover:blur-md transition-all duration-300" />
<Avatar className="h-24 w-24 mx-auto ring-4 ring-background shadow-2xl"> <Card className="relative bg-background/80 backdrop-blur-sm border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">
<AvatarImage <CardContent className="p-8 text-center">
src={topContributor.avatar_url} <div className="relative mb-6">
alt={`${topContributor.login}'s avatar`} <Avatar className="h-24 w-24 mx-auto ring-4 ring-background shadow-2xl">
/> <AvatarImage
<AvatarFallback className="text-lg font-semibold"> src={contributor.avatar_url}
{topContributor.login.charAt(0).toUpperCase()} alt={`${contributor.login}'s avatar`}
</AvatarFallback> />
</Avatar> <AvatarFallback className="text-lg font-semibold">
<div className="absolute -top-2 -right-2 bg-foreground text-background rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold"> {contributor.login.charAt(0).toUpperCase()}
1 </AvatarFallback>
</div> </Avatar>
</div> <div className="absolute -top-2 -right-2 bg-foreground text-background rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold">
<h3 className="text-xl font-semibold mb-2 group-hover:text-foreground/80 transition-colors"> {index + 1}
{topContributor.login} </div>
</h3> </div>
<div className="flex items-center justify-center gap-2 text-muted-foreground"> <h3 className="text-xl font-semibold mb-2 group-hover:text-foreground/80 transition-colors">
<span className="font-medium text-foreground"> {contributor.login}
{topContributor.contributions} </h3>
</span> <div className="flex items-center justify-center gap-2 text-muted-foreground">
<span>contributions</span> <span className="font-medium text-foreground">
</div> {contributor.contributions}
</CardContent> </span>
</Card> <span>contributions</span>
</div> </div>
</Link> </CardContent>
</Card>
</div>
</Link>
))}
</div>
</div> </div>
)} )}