feat: add conditions

Author: anandmindfire

src/app/contributors/components/TopContributors.tsx

@@ -9,15 +9,23 @@ interface Contributor {
   avatar_url: string;
   html_url: string;
   contributions: number;
+  lastActiveDays: number | null;
 }
 
 interface TopContributorsProps {
   contributors: Contributor[];
 }
 
 const TopContributors = ({ contributors }: TopContributorsProps) => {
+  const getLastActiveText = (days: number | null): string => {
+    if (days === null) return "No recent activity";
+    if (days === 0) return "Active today";
+    if (days === 1) return "Active yesterday";
+    return `Active ${days} days ago`;
+  };
+
   return (
-    <div className='relative  items-center max-w-5xl mx-auto px-4 py-8'>
+    <div className='relative items-center max-w-5xl mx-auto px-4 py-8'>
       {/* Contributors scroll container */}
       <div className='flex gap-6 overflow-x-auto scrollbar-hide snap-x snap-mandatory scroll-px-6 px-8'>
         {contributors.slice(0, 6).map((contributor) => (
@@ -49,6 +57,9 @@ const TopContributors = ({ contributors }: TopContributorsProps) => {
                 <p className='text-xs text-gray-500'>
                   {contributor.contributions} contributions
                 </p>
+                <p className='text-xs text-gray-400'>
+                  {getLastActiveText(contributor.lastActiveDays)}
+                </p>
               </div>
             </div>
           </Link>

src/app/contributors/page.tsx

@@ -9,11 +9,28 @@ import contributorList from "../projects/assets/contributors.json";
 import ContributorCount from "./components/ContributorCount";
 import TopContributors from "./components/TopContributors";
 
+interface Contributor {
+  id: number;
+  contributions: number;
+  html_url: string;
+  avatar_url: string;
+  login: string;
+  lastActiveDays: number | null;
+}
+
 const Contributors = () => {
-  const contributorsArray = Object.values(contributorList);
+  const contributorsArray = Object.values(contributorList) as Contributor[];
+
+  // Filter and sort contributors for top section (active in last 30 days)
+  const activeTopContributors = [...contributorsArray]
+    .filter(
+      (contributor) =>
+        contributor.lastActiveDays === null || contributor.lastActiveDays <= 30
+    )
+    .sort((a, b) => b.contributions - a.contributions);
 
-  // Sort contributors by contributions for top contributors section
-  const sortedContributors = [...contributorsArray].sort(
+  // Sort all contributors by contributions for the main grid
+  const sortedAllContributors = [...contributorsArray].sort(
     (a, b) => b.contributions - a.contributions
   );
 
@@ -31,13 +48,13 @@ const Contributors = () => {
           {/* Top Contributors Section */}
           <div className='mt-12 flex flex-col items-center justify-center'>
             <h2 className='text-2xl font-medium text-gray-800 mb-6'>
-              Top Contributors
+              Top Active Contributors
             </h2>
             <p className='text-xl text-mf-light-grey tracking-wide mb-2'>
               Meet our top six contributors — the people who help turn ideas
               into impact.
             </p>
-            <TopContributors contributors={sortedContributors} />
+            <TopContributors contributors={activeTopContributors} />
           </div>
 
           {/* All Contributors Section */}
@@ -46,12 +63,12 @@ const Contributors = () => {
               All Contributors
             </h2>
             <p className='text-xl text-mf-light-grey tracking-wide mb-10'>
-              We’re a dynamic group of individuals who are passionate about what
-              we do.
+              We&apos;re a dynamic group of individuals who are passionate about
+              what we do.
             </p>
             {contributorsArray ? (
               <div className='grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4'>
-                {contributorsArray.map((contributor) => (
+                {sortedAllContributors.map((contributor) => (
                   <div
                     key={contributor.id}
                     className='bg-white border border-gray-200 rounded-lg shadow-lg transition-transform duration-300 transform hover:scale-105'