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

Add a right-aligned article card to the main carousel section

Browse Source 
Modify the FeaturedCarousel component to accept and display a `sideArticle` prop, integrating a `WideCard` into the right column of the carousel layout, below the `TopStoriesList`.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: b081b224-a9aa-4517-adf6-d6b4614bb98d
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:25:17 +00:00
parent 3f88aae55e
commit 31f3806b4b
2 changed files with 6 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772317442504.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 147 KiB

13
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, sideArticle }: { articles: Article[]; popular?: Article[]; galleryImages?: GalleryImage[]; focalPoints?: Record<string, { x: number; y: number }>; sideArticle?: Article }) {
const pageSize = 3;
const totalPages = Math.max(1, Math.ceil(Math.min(articles.length, 9) / pageSize));
const [page, setPage] = useState(0);
@ -393,8 +393,9 @@ function FeaturedCarousel({ articles, popular, galleryImages, focalPoints }: { a
</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} />}
{sideArticle && <WideCard article={sideArticle} focalPoints={focalPoints} />}
</div>
</div>
{totalPages > 1 && (
@ -521,7 +522,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">
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} sideArticle={widePickedArticles[0]} />
{gridRows.map((row, ri) => (
<div key={ri} className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
@ -535,11 +536,9 @@ export default function Home() {
</div>
))}
{widePickedArticles.length > 0 && (
{widePickedArticles.length > 1 && (
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
{widePickedArticles.map((a) => (
<WideCard key={`wide-${a.id}`} article={a} focalPoints={focalPoints} />
))}
<WideCard article={widePickedArticles[1]} focalPoints={focalPoints} />
</div>
)}