Add a single featured article to the bottom of the homepage grid
Move the WideCard component to display a single featured article at the end of the homepage grid layout, consuming two columns on smaller screens. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 517dfa7b-26ac-463d-a6e1-a58c6df97188 Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Event-Id: eab6ad47-19af-45fd-9e98-a28298c6a4e4 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:
parent
b73903f4a6
commit
d58ee4c679
@ -523,14 +523,6 @@ export default function Home() {
|
|||||||
|
|
||||||
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
|
<FeaturedCarousel articles={articles} popular={popular} galleryImages={galleryImages} focalPoints={focalPoints} />
|
||||||
|
|
||||||
{widePickedArticles.length > 0 && (
|
|
||||||
<div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
|
||||||
{widePickedArticles.map((a) => (
|
|
||||||
<WideCard key={`wide-${a.id}`} article={a} focalPoints={focalPoints} />
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{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">
|
||||||
{row.map((item, ci) =>
|
{row.map((item, ci) =>
|
||||||
@ -540,6 +532,11 @@ export default function Home() {
|
|||||||
? <MediumCard key={item.article.id} article={item.article} focalPoints={focalPoints} />
|
? <MediumCard key={item.article.id} article={item.article} focalPoints={focalPoints} />
|
||||||
: null
|
: null
|
||||||
)}
|
)}
|
||||||
|
{ri === gridRows.length - 1 && widePickedArticles.length > 0 && (
|
||||||
|
<div className="sm:col-span-2">
|
||||||
|
<WideCard article={widePickedArticles[0]} focalPoints={focalPoints} />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user