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

Update the home page to display featured articles more effectively

Browse Source 
Refactors the home page component to adjust the display of featured articles. The carousel now shows up to 5 articles individually, with remaining articles displayed in subsequent rows. This change optimizes the presentation of content on the home page by reallocating articles from the carousel to lower sections of the page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 413891e8-d784-4bea-b9f5-91a5a68316b4
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: c8f91b67-8f28-4538-af2f-42eb06d9fa17
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/413891e8-d784-4bea-b9f5-91a5a68316b4/RVXhOPb
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 19:30:39 +00:00
parent 102c6f0046
commit f951e18b20
1 changed files with 23 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -203,62 +203,42 @@ function TopStoriesList({ articles }: { articles: Article[] }) {
}
function FeaturedCarousel({ articles, popular, galleryImages }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[] }) {
const totalPages = Math.ceil(Math.min(articles.length, 12) / 3);
const pool = articles.slice(0, 5);
const hasGallery = galleryImages && galleryImages.length > 0;
const totalWithGallery = totalPages + (hasGallery ? 1 : 0);
const total = pool.length + (hasGallery ? 1 : 0);
const [page, setPage] = useState(0);
const [paused, setPaused] = useState(false);
const next = useCallback(() => {
setPage((p) => (p + 1) % totalWithGallery);
}, [totalWithGallery]);
setPage((p) => (p + 1) % total);
}, [total]);
useEffect(() => {
if (paused || totalWithGallery <= 1) return;
if (paused || total <= 1) return;
const timer = setInterval(next, 8000);
return () => clearInterval(timer);
}, [paused, next, totalWithGallery]);
}, [paused, next, total]);
const pool = articles.slice(0, 12);
const isGalleryPage = hasGallery && page === totalWithGallery - 1;
let hero: Article | null = null;
let side: Article[] = [];
if (!isGalleryPage) {
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]);
}
hero = visible[0] || null;
side = visible.slice(1, 3);
}
const isGalleryPage = hasGallery && page === total - 1;
const hero: Article | null = isGalleryPage ? null : (pool[page] || 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={isGalleryPage ? "lg:col-span-5" : "lg:col-span-3"}>
<div className="lg:col-span-5">
{isGalleryPage && galleryImages ? (
<GalleryHeroCard images={galleryImages.slice(0, 30)} />
) : hero ? (
<HeroCard article={hero} />
) : null}
</div>
{!isGalleryPage && (
<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>
{totalWithGallery > 1 && (
{total > 1 && (
<div className="flex justify-center gap-2 mt-3" data-testid="carousel-dots">
{Array.from({ length: totalWithGallery }).map((_, i) => (
{Array.from({ length: total }).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>
@ -316,9 +296,11 @@ export default function Home() {
);
}
const row2Articles = articles.slice(3, 6);
const row3Articles = articles.slice(6, 9);
const row4Articles = articles.slice(9);
const carouselCount = Math.min(articles.length, 5);
const remaining = articles.slice(carouselCount);
const row2Articles = remaining.slice(0, 4);
const row3Articles = remaining.slice(4, 7);
const row4Articles = remaining.slice(7, 10);
return (
<div className="min-h-screen bg-background">
@ -327,12 +309,13 @@ export default function Home() {
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row2Articles.map((a) => (
<MediumCard key={a.id} article={a} />
))}
<NativeAdCard />
</div>
{row2Articles.length > 0 && (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
{row2Articles.map((a) => (
<MediumCard key={a.id} article={a} />
))}
</div>
)}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 auto-rows-fr">
<div className="aspect-[4/5]">