sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add a carousel to rotate featured articles on the homepage

Browse Source 
Introduces a `FeaturedCarousel` component to `pages/home.tsx`, replacing the static hero and medium cards. This component displays the top 9 articles in a rotating 3-article set (hero + 2 medium cards) with manual navigation dots and auto-play functionality, refreshing every 8 seconds.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d4e9014a-4e53-4f9d-8b89-76090db548d0
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/igVW4lQ
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 18:07:46 +00:00
parent a15dea1fe7
commit 9efb44269f
1 changed files with 70 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
client/src/pages/home.tsx
View File

@ -199,6 +199,75 @@ function BentoSkeleton() {
);
}
function FeaturedCarousel({ articles, popular }: { articles: Article[]; popular?: Article[] }) {
const totalPages = Math.ceil(Math.min(articles.length, 9) / 3);
const [page, setPage] = useState(0);
const [paused, setPaused] = useState(false);
const next = useCallback(() => {
setPage((p) => (p + 1) % totalPages);
}, [totalPages]);
useEffect(() => {
if (paused || totalPages <= 1) return;
const timer = setInterval(next, 8000);
return () => clearInterval(timer);
}, [paused, next, totalPages]);
const pool = articles.slice(0, 9);
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);
if (!hero) return null;
return (
<section
data-testid="featured-carousel"
onMouseEnter={() => setPaused(true)}
onMouseLeave={() => setPaused(false)}
>
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
<div className="lg:col-span-3">
<HeroCard article={hero} />
</div>
<div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
{side.map((a) => (
<MediumCard key={a.id} article={a} />
))}
</div>
<div className="lg:col-span-1">
{popular && popular.length > 0 && (
<TopStoriesList articles={popular} />
)}
</div>
</div>
{totalPages > 1 && (
<div className="flex justify-center gap-2 mt-3" data-testid="carousel-dots">
{Array.from({ length: totalPages }).map((_, i) => (
<button
key={i}
onClick={() => setPage(i)}
className={`w-2.5 h-2.5 rounded-full transition-all duration-300 ${
i === page ? "bg-primary w-6" : "bg-muted-foreground/30 hover:bg-muted-foreground/50"
}`}
data-testid={`button-carousel-dot-${i}`}
/>
))}
</div>
)}
</section>
);
}
export default function Home() {
const { data: articles, isLoading } = useQuery<Article[]>({
queryKey: ["/api/articles"],
@ -221,8 +290,6 @@ export default function Home() {
}
const all = articles;
const row1Hero = all[0];
const row1Medium = all.slice(1, 3);
const row2Items = all.slice(3, 6);
const row3Items = all.slice(6);
@ -231,25 +298,7 @@ export default function Home() {
<Header />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
{row1Hero && (
<div className="grid grid-cols-1 lg:grid-cols-6 gap-4">
<div className="lg:col-span-3">
<HeroCard article={row1Hero} />
</div>
<div className="lg:col-span-2 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-1 gap-4">
{row1Medium.map((a) => (
<MediumCard key={a.id} article={a} />
))}
</div>
<div className="lg:col-span-1">
{popular && popular.length > 0 && (
<TopStoriesList articles={popular} />
)}
</div>
</div>
)}
<FeaturedCarousel articles={all} popular={popular} />
<div className="rounded-lg border border-card-border bg-card overflow-hidden">
<AdSense