diff --git a/client/src/pages/home.tsx b/client/src/pages/home.tsx index 159d4ba..e3aa7e8 100644 --- a/client/src/pages/home.tsx +++ b/client/src/pages/home.tsx @@ -8,15 +8,42 @@ import { Skeleton } from "@/components/ui/skeleton"; import { Button } from "@/components/ui/button"; import Header from "@/components/header"; import Footer from "@/components/footer"; +import { useState, useEffect, useCallback } from "react"; function FeaturedSection({ articles }: { articles: Article[] }) { - if (articles.length === 0) return null; + const pool = articles.slice(0, 6); + const totalPages = Math.ceil(pool.length / 3); + const [page, setPage] = useState(0); + const [paused, setPaused] = useState(false); - const hero = articles[0]; - const side = articles.slice(1, 3); + const next = useCallback(() => { + setPage((p) => (p + 1) % totalPages); + }, [totalPages]); + + useEffect(() => { + if (paused || totalPages <= 1) return; + const timer = setInterval(next, 5000); + return () => clearInterval(timer); + }, [paused, next, totalPages]); + + if (pool.length === 0) return null; + + const start = page * 3; + const visible = pool.slice(start, start + 3); + while (visible.length < 3 && pool.length >= 3) { + visible.push(pool[visible.length % pool.length]); + } + + const hero = visible[0]; + const side = visible.slice(1, 3); return ( -
+
setPaused(true)} + onMouseLeave={() => setPaused(false)} + >
+ + {totalPages > 1 && ( +
+ {Array.from({ length: totalPages }).map((_, i) => ( +
+ )}
); } diff --git a/server/storage.ts b/server/storage.ts index 8b59771..7a2c320 100644 --- a/server/storage.ts +++ b/server/storage.ts @@ -31,7 +31,7 @@ export class DatabaseStorage implements IStorage { } async getFeaturedArticles(): Promise { - return db.select().from(articles).where(eq(articles.featured, true)).orderBy(desc(articles.publishedAt)).limit(3); + return db.select().from(articles).orderBy(desc(articles.publishedAt)).limit(6); } async getPopularArticles(limit: number): Promise {