Merge pull request #1451 from OpenBeta/feat-change-recent-contribs

change recent contributions to a link

Author: CocoisBuggy

src/app/(default)/components/LatestContributions.tsx

@@ -1,6 +1,6 @@
-import { ReactNode } from 'react'
 import Link from 'next/link'
-import { ArrowRightIcon } from '@heroicons/react/24/outline'
+import { ArrowRightIcon, PencilSquareIcon } from '@heroicons/react/24/outline'
+import { SectionContainer } from './ui/SectionContainer'
 
 // Temporarily disabled to test build - this fetches 6MB of data
 // import { getChangeHistoryServerSide } from '@/js/graphql/contribAPI'
@@ -13,40 +13,22 @@ export const LatestContributions: React.FC = async () => {
   // Temporarily disabled - fetches 6MB history just to show 10 items
   // const history = await getChangeHistoryServerSide()
   return (
-    <Container>
-      <div className='text-center text-base-content/60 py-8'>
-        Latest contributions temporarily disabled
-      </div>
-    </Container>
-  )
-}
-
-/**
- * Resuable container for actual and skeleton
- */
-const Container: React.FC<{ children: ReactNode }> = ({ children }) => (
-  <section className='px-4 w-full bg-base-200'>
-    <div className='mt-2 flex items-center justify-between'>
-      <p>LATEST CONTRIBUTIONS</p>
-      <Link href='/edit' className='text-sm hover:underline'>See more</Link>
-    </div>
-    <hr className='mb-6 border-1 border-base-content' />
-    <div className='mt-4 flex justify-center flex-row flex-wrap gap-y-10 gap-x-4'>
-      {children}
-    </div>
-    <div className='flex justify-center py-10'>
-      <Link href='/edit' className='btn btn-sm btn-outline'>See more <ArrowRightIcon className='w-4 h-4' /></Link>
-    </div>
-  </section>
-)
-
-/**
- * Loading skelton
- */
-export const LatestContributionsSkeleton: React.FC = () => {
-  return (
-    <Container>
-      {[1, 2, 3, 4, 5].map(item => <div key={item} className='w-full bg-base-200/20 h-36 rounded-box' />)}
-    </Container>
+    <SectionContainer header={<h2>Latest Contributions</h2>}>
+      <Link
+        href='/edit'
+        className='group flex items-center justify-between gap-4 w-full rounded-box border border-base-content/20 bg-base-200/40 hover:bg-base-200 hover:border-base-content/40 transition-all duration-200 p-5 lg:p-6'
+      >
+        <div className='flex items-center gap-4'>
+          <div className='flex-shrink-0 w-10 h-10 rounded-box bg-base-content/10 group-hover:bg-base-content/15 flex items-center justify-center transition-colors duration-200'>
+            <PencilSquareIcon className='w-5 h-5 text-base-content/70' />
+          </div>
+          <div>
+            <p className='font-semibold text-base-content text-sm uppercase tracking-wide'>View recent edits</p>
+            <p className='text-sm text-base-content/60 mt-0.5'>Browse the latest changes made by the community</p>
+          </div>
+        </div>
+        <ArrowRightIcon className='w-5 h-5 text-base-content/40 group-hover:text-base-content/70 group-hover:translate-x-0.5 transition-all duration-200 flex-shrink-0' />
+      </Link>
+    </SectionContainer>
   )
 }

src/app/(default)/page.tsx

@@ -1,13 +1,12 @@
-import { Suspense } from 'react'
 import { LandingHero } from './components/LandingHero'
 // import { getChangeHistoryServerSide } from '@/js/graphql/contribAPI'
-import { LatestContributions, LatestContributionsSkeleton } from './components/LatestContributions'
+import { LatestContributions } from './components/LatestContributions'
 import { FinancialContributors } from './components/FinancialContributors'
 import { RecentTags } from './components/RecentTags'
 import { USAToC } from './components/USAToC'
 import { InternationalToC } from './components/InternationalToC'
 import { Volunteers } from './components/Volunteers'
-import { RecentContributionsMap } from './components/recent/RecentContributionsMap'
+// import { RecentContributionsMap } from './components/recent/RecentContributionsMap'
 // import { ChangesetType } from '@/js/types'
 
 export const revalidate = 3600 // 1 hour
@@ -24,25 +23,19 @@ export default async function Home (): Promise<any> {
   //   console.error('Failed to fetch change history during build:', error)
   //   // Continue with empty history if API is down
   // }
-  const history: never[] = []
+  // const history: never[] = []
   return (
     <>
       <div className='default-page-margins flex flex-col justify-center w-fit'>
         <LandingHero />
       </div>
       <div className='default-page-margins flex flex-col gap-y-12 mb-16'>
         <RecentTags />
-        <div className='lg:grid lg:grid-cols-3 gap-x-2'>
-          <div className='lg:overflow-y-auto lg:h-[450px] w-full border-2 rounded-box'>
-            <Suspense fallback={<LatestContributionsSkeleton />}>
-              <LatestContributions />
-            </Suspense>
-          </div>
-
-          <div className='lg:col-span-2 h-[450px]'>
+        <LatestContributions />
+        {/* Temporarily disabled to test if this is causing build failures */}
+        {/* <div className='lg:col-span-2 h-[450px]'>
             <RecentContributionsMap history={history} />
-          </div>
-        </div>
+          </div> */}
         <InternationalToC />
         <USAToC />
         <FinancialContributors />