terry/Arkie-Library-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: hide empty popular home section

Browse Source
This commit is contained in:
TerryM
2026-05-28 17:40:35 +08:00
parent 5036c930bb
commit b6ba4d53e7
1 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/pages/Home/index.tsx
View File

@@ -179,6 +179,7 @@ export function Home() {
}, [hash, cats.length, rec.length, latest.length, popular.length]); }, [hash, cats.length, rec.length, latest.length, popular.length]);
const latestPlaceholderCount = Math.max(0, 5 - latest.length); const latestPlaceholderCount = Math.max(0, 5 - latest.length);
const hasPopular = popular.length > 0 || popularPosts.length > 0;
const popularPlaceholderCount = Math.max(0, 5 - popular.length); const popularPlaceholderCount = Math.max(0, 5 - popular.length);
const recommendedDotCount = rec.length; const recommendedDotCount = rec.length;
const activeRecommendedDot = const activeRecommendedDot =
@@ -388,31 +389,37 @@ export function Home() {
</div> </div>
</section> </section>
<section id="popular" className="scroll-mt-16 md:scroll-mt-24"> {hasPopular ? (
<div className="px-4 md:px-0"> <section id="popular" className="scroll-mt-16 md:scroll-mt-24">
<SectionHeader <div className="px-4 md:px-0">
title={t("popularSection")} <SectionHeader
viewAllTo="/browse?tag=popular" title={t("popularSection")}
viewAllLabel={t("viewAll")} viewAllTo="/browse?sort=popular"
/> viewAllLabel={t("viewAll")}
</div>
<div className="flex flex-col gap-3 md:hidden">
{popularPosts.slice(0, 5).map((post) => (
<MessageBubble key={post.id} post={post} />
))}
</div>
<div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
{popular.map((r) => (
<LatestUpdateRow key={r.id} r={r} iconKey={iconKeyForResource(r)} />
))}
{Array.from({ length: popularPlaceholderCount }).map((_, index) => (
<ComingSoonLatestUpdateRow
key={`popular-coming-soon-${index}`}
index={popular.length + index}
/> />
))} </div>
</div> <div className="flex flex-col gap-3 md:hidden">
</section> {popularPosts.slice(0, 5).map((post) => (
<MessageBubble key={post.id} post={post} />
))}
</div>
<div className="mt-7 hidden grid-cols-1 gap-3 min-[576px]:grid-cols-2 md:grid md:grid-cols-2 md:gap-4 lg:grid-cols-3 xl:grid-cols-5">
{popular.map((r) => (
<LatestUpdateRow
key={r.id}
r={r}
iconKey={iconKeyForResource(r)}
/>
))}
{Array.from({ length: popularPlaceholderCount }).map((_, index) => (
<ComingSoonLatestUpdateRow
key={`popular-coming-soon-${index}`}
index={popular.length + index}
/>
))}
</div>
</section>
) : null}
{categoryUnavailableOpen ? ( {categoryUnavailableOpen ? (
<div <div