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

Rearrange featured articles to a new layout

Browse Source 
Modify the FeaturedCarousel component to accept and display two wide articles in the right-hand column, positioning them vertically below the TopStoriesList. This change repositions them from their previous location at the bottom of the page.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: 5f582374-57c4-445b-b7a9-8817e060727e
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/517dfa7b-26ac-463d-a6e1-a58c6df97188/0ZGabQy
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sebastjanartic 2026-02-28 22:22:10 +00:00
parent 047dc60c25
commit 43d3c230d5
1 changed files with 5 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -360,7 +360,7 @@ function FeaturedHeroCard({ article, focalPoints }: { article: Article; focalPoi
); );
} }
function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }> }) { function FeaturedCarousel({ articles, popular, galleryImages, focalPoints, wideArticles }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }>; wideArticles?: Article[] }) {
const pageSize = 3; const pageSize = 3;
const totalPages = Math.max(1, Math.ceil(Math.min(articles.length, 9) / pageSize)); const totalPages = Math.max(1, Math.ceil(Math.min(articles.length, 9) / pageSize));
const [page, setPage] = useState(0); const [page, setPage] = useState(0);
@ -393,8 +393,10 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { a
</div> </div>
</div> </div>
</div> </div>
<div className="lg:col-span-1"> <div className="lg:col-span-1 flex flex-col gap-4">
{popular && popular.length > 0 && <TopStoriesList articles={popular} />} {popular && popular.length > 0 && <TopStoriesList articles={popular} />}
{wideArticles && wideArticles.length > 0 && <WideCard article={wideArticles[0]} focalPoints={focalPoints} />}
{wideArticles && wideArticles.length > 1 && <WideCard article={wideArticles[1]} focalPoints={focalPoints} />}
</div> </div>
</div> </div>
{totalPages > 1 && ( {totalPages > 1 && (
@ -508,7 +510,7 @@ export default function Home() {
<Header /> <Header />
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4"> <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 space-y-4">
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} /> <FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} wideArticles={shuffled.length > 1 ? [shuffled[shuffled.length - 1], shuffled[shuffled.length - 2]] : []} />
{gridRows.map((row, ri) => ( {gridRows.map((row, ri) => (
<div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4"> <div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
@ -522,17 +524,6 @@ export default function Home() {
</div> </div>
))} ))}
{shuffled.length > 1 && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<WideCard article={shuffled[shuffled.length - 1]} focalPoints={focalPoints} />
</div>
)}
{shuffled.length > 2 && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
<WideCard article={shuffled[shuffled.length - 2]} focalPoints={focalPoints} />
</div>
)}
</main> </main>
<Footer /> <Footer />
</div> </div>