Skip to content

fix: search matching aggregate metrics on people page #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
naman79820 merged 1 commit into from
Jan 9, 2026
Merged

fix: search matching aggregate metrics on people page #161

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 26 additions & 18 deletions app/people/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
import { useState, useEffect, useMemo } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Loader2, Activity } from "lucide-react";
import { Loader2, Activity, Users } from "lucide-react";
import { PeopleStats } from "@/components/people/PeopleStats";
import { PeopleGrid } from "@/components/people/PeopleGrid";
import { ContributorDetail } from "@/components/people/ContributorDetail";
Expand Down Expand Up @@ -262,30 +262,16 @@ const filteredPeople = useMemo(() => {
/>

<div className="mb-8">
{/* TITLE + SEARCH ROW */}
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-4">
{/* TITLE */}
<div className="mb-4">
<h2 className="text-3xl font-bold">
<span className="text-black dark:text-white">Community </span>
<span className="text-[#42B883]">Contributors</span>
</h2>

{/* SEARCH BAR — RIGHT SIDE */}
<div className="relative w-full sm:w-72">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
type="text"
aria-label="Search contributors by name or username"
placeholder="Search contributors..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-9"
/>

</div>
</div>

{/* DESCRIPTION */}
<p className="text-lg text-muted-foreground max-w-3xl">
<p className="text-lg text-muted-foreground max-w-3xl mb-6">
Amazing community members who contribute to CircuitVerse through
code, documentation, and more.
</p>
Expand All @@ -298,6 +284,28 @@ const filteredPeople = useMemo(() => {
onContributorClick={handleContributorClick}
/>

<div className="flex items-center justify-between gap-4 py-8">
<div className="flex items-center gap-2">
<Users className="w-5 h-5 text-muted-foreground" />
<span className="text-2xl font-bold text-foreground">
{filteredPeople.length}{' '}
<span className="text-[#42B883]">
{filteredPeople.length === 1 ? 'Contributor' : 'Contributors'}
</span>
{searchQuery && <span className="text-foreground"> found</span>}
</span>
</div>
<div className="relative w-full sm:w-72">
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input
type="text"
placeholder="Search contributors..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-9 h-10"
/>
</div>
</div>
<PeopleGrid
contributors={filteredPeople}
onContributorClick={handleContributorClick}
Expand Down