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

fix: cap banners shown to 10 with a single-row dot indicator
All checks were successful
Deploy to Frontend Servers / deploy (push) Successful in 28s
Details

Browse Source 
The banners API can return hundreds of records; show at most 10 so the carousel
and its dot indicator stay on one row within the phone width, regardless of how
many exist on the backend.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-06-02 11:16:49 +08:00
parent e752de67e1
commit fbb9d21f24
1 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/FigmaBanner.tsx
View File

@@ -40,6 +40,8 @@ type BannerApiResponse = {
const AUTOPLAY_MS = 3000; const AUTOPLAY_MS = 3000;
const RESUME_AFTER_INTERACTION_MS = 8000; const RESUME_AFTER_INTERACTION_MS = 8000;
// Product rule: show at most 10 banners, so the dot row always fits one line.
const MAX_BANNERS = 10;
const publicMenuOpenChangeEvent = "ark:public-menu-open-change"; const publicMenuOpenChangeEvent = "ark:public-menu-open-change";
function bannerLangParam(lang: Lang): string { function bannerLangParam(lang: Lang): string {
@@ -82,6 +84,7 @@ function toSlides(items: BannerApiItem[]): BannerSlide[] {
return [...items] return [...items]
.sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)) .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
.filter((item) => item.imageUrl) .filter((item) => item.imageUrl)
.slice(0, MAX_BANNERS)
.map((item) => { .map((item) => {
const imageUrl = assetUrl(item.imageUrl); const imageUrl = assetUrl(item.imageUrl);
return { return {
@@ -292,12 +295,11 @@ export function FigmaBanner() {
if (slides.length === 0) return null; if (slides.length === 0) return null;
// Show every slide's dot. The row stays within the screen width and wraps to // At most MAX_BANNERS slides, so the dots always fit on a single centered row.
// a second row (and beyond if needed) instead of overflowing horizontally.
const pagination = hasMultiple ? ( const pagination = hasMultiple ? (
<div className="px-4"> <div className="px-4">
<div <div
className="mx-auto flex max-w-full flex-wrap items-center justify-center gap-1.5 md:gap-2" className="mx-auto flex max-w-full items-center justify-center gap-1.5 md:gap-2"
role="tablist" role="tablist"
aria-label="Banner pagination" aria-label="Banner pagination"
> >