fix: curated collections ui tweak

This commit is contained in:
Jake Turner 2026-01-15 19:15:13 +00:00 committed by Jake Turner
parent 4b74118fd9
commit 400cd740bd
2 changed files with 25 additions and 19 deletions

View File

@ -191,20 +191,20 @@ export default function MapsManager(props: {
> >
Download Custom Map File Download Custom Map File
</StyledButton> </StyledButton>
<StyledButton
onClick={() => fetchLatestCollections.mutate()}
disabled={fetchLatestCollections.isPending}
icon="CloudArrowDownIcon"
>
Fetch Latest Collections
</StyledButton>
</div> </div>
</div> </div>
{!props.maps.baseAssetsExist && ( {!props.maps.baseAssetsExist && (
<MissingBaseAssetsAlert loading={downloading} onClickDownload={downloadBaseAssets} /> <MissingBaseAssetsAlert loading={downloading} onClickDownload={downloadBaseAssets} />
)} )}
<StyledSectionHeader title="Curated Map Collections" className="mt-8 mb-4" /> <StyledSectionHeader title="Curated Map Collections" className="mt-8 !mb-4" />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <StyledButton
onClick={() => fetchLatestCollections.mutate()}
disabled={fetchLatestCollections.isPending}
icon="CloudArrowDownIcon"
>
Fetch Latest Collections
</StyledButton>
<div className="!mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{curatedCollections?.map((collection) => ( {curatedCollections?.map((collection) => (
<CuratedCollectionCard <CuratedCollectionCard
key={collection.slug} key={collection.slug}
@ -212,6 +212,9 @@ export default function MapsManager(props: {
onClick={(collection) => confirmDownload(collection)} onClick={(collection) => confirmDownload(collection)}
/> />
))} ))}
{curatedCollections && curatedCollections.length === 0 && (
<p className="text-gray-500">No curated collections available.</p>
)}
</div> </div>
<StyledSectionHeader title="Stored Map Files" className="mt-12 mb-4" /> <StyledSectionHeader title="Stored Map Files" className="mt-12 mb-4" />
<StyledTable<FileEntry & { actions?: any }> <StyledTable<FileEntry & { actions?: any }>

View File

@ -198,13 +198,6 @@ export default function ZimRemoteExplorer() {
<h1 className="text-4xl font-semibold mb-2">ZIM Remote Explorer</h1> <h1 className="text-4xl font-semibold mb-2">ZIM Remote Explorer</h1>
<p className="text-gray-500">Browse and download ZIM files for offline reading!</p> <p className="text-gray-500">Browse and download ZIM files for offline reading!</p>
</div> </div>
<StyledButton
onClick={() => fetchLatestCollections.mutate()}
disabled={fetchLatestCollections.isPending}
icon="CloudArrowDownIcon"
>
Fetch Latest Collections
</StyledButton>
</div> </div>
{!isOnline && ( {!isOnline && (
<Alert <Alert
@ -223,16 +216,26 @@ export default function ZimRemoteExplorer() {
className="!mt-6" className="!mt-6"
/> />
)} )}
<StyledSectionHeader title="Curated ZIM Collections" className="mt-8 mb-4" /> <StyledSectionHeader title="Curated ZIM Collections" className="mt-8 !mb-4" />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <StyledButton
onClick={() => fetchLatestCollections.mutate()}
disabled={fetchLatestCollections.isPending}
icon="CloudArrowDownIcon"
>
Fetch Latest Collections
</StyledButton>
<div className="mt-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{curatedCollections?.map((collection) => ( {curatedCollections?.map((collection) => (
<CuratedCollectionCard <CuratedCollectionCard
key={collection.slug} key={collection.slug}
collection={collection} collection={collection}
onClick={(collection) => confirmDownload(collection)} onClick={(collection) => confirmDownload(collection)}
size='large' size="large"
/> />
))} ))}
{curatedCollections && curatedCollections.length === 0 && (
<p className="text-gray-500">No curated collections available.</p>
)}
</div> </div>
<StyledSectionHeader title="Browse the Kiwix Library" className="mt-12 mb-4" /> <StyledSectionHeader title="Browse the Kiwix Library" className="mt-12 mb-4" />
<div className="flex justify-start mt-4"> <div className="flex justify-start mt-4">