ZenBrowserMirrors/www
1
0
Fork 0
mirror of https://github.com/zen-browser/www.git synced 2025-07-07 17:05:32 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(mods): update mods for larger monitor screen

Browse source
This commit is contained in:
Shintaro Jokagi 2025-03-17 00:10:08 +13:00
parent 03906ef819
commit 51db578f7a
2 changed files with 37 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/components/ModsList.tsx
View file

@ -127,7 +127,7 @@ export default function ModsList({ mods }: ModsListProps) {
return (
<div>
<div className="mx-auto mb-8 flex flex-col items-start gap-4 px-8 lg:w-1/2">
<div className="mx-auto flex flex-col items-start gap-4 px-8 lg:w-1/2">
<div className="flex w-full flex-col items-center gap-6">
<input
type="text"
@ -189,32 +189,41 @@ export default function ModsList({ mods }: ModsListProps) {
</div>
</div>
<div className="mx-auto grid grid-cols-1 gap-12 p-10 md:grid-cols-2 lg:grid-cols-3 lg:p-24 lg:px-24">
{paginatedMods.map((mod) => (
<a
key={mod.id}
href={`/mods/${mod.id}`}
className="mb-6 flex flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
>
<div className="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md lg:h-auto">
<img
src={mod.image}
alt={mod.name}
loading="lazy"
className="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
/>
</div>
<div>
<h2 className="text-lg font-bold">
{mod.name}{' '}
<span className="ml-1 text-sm font-normal">
by @{mod.author}
</span>
</h2>
<p className="text-sm font-thin">{mod.description}</p>
</div>
</a>
))}
<div className="mx-auto grid grid-cols-1 place-items-start gap-12 p-10 md:grid-cols-2 lg:grid-cols-3 lg:p-24 lg:px-24 2xl:grid-cols-4">
{paginatedMods.length > 0 ? (
paginatedMods.map((mod) => (
<a
key={mod.id}
href={`/mods/${mod.id}`}
className="flex flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
>
<div className="relative mb-0 block aspect-[1.85/1] h-48 overflow-hidden rounded-md border-2 border-dark object-cover shadow-md lg:h-auto">
<img
src={mod.image}
alt={mod.name}
loading="lazy"
className="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
/>
</div>
<div>
<h2 className="text-lg font-bold">
{mod.name}{' '}
<span className="ml-1 text-sm font-normal">
by @{mod.author}
</span>
</h2>
<p className="text-sm font-thin">{mod.description}</p>
</div>
</a>
))
) : (
<div className="col-span-4 grid place-items-center gap-4 place-self-center px-8 text-center">
<h2 className="text-lg font-bold">No results found</h2>
<p className="text-sm font-thin">
Try searching for a different term or check back later.
</p>
</div>
)}
</div>
{renderPagination()}