mirror of
https://github.com/zen-browser/www.git
synced 2025-07-08 01:10:02 +02:00
refactor(mods): update mods for larger monitor screen
This commit is contained in:
parent
03906ef819
commit
51db578f7a
2 changed files with 37 additions and 28 deletions
|
@ -127,7 +127,7 @@ export default function ModsList({ mods }: ModsListProps) {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<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">
|
<div className="flex w-full flex-col items-center gap-6">
|
||||||
<input
|
<input
|
||||||
type="text"
|
type="text"
|
||||||
|
@ -189,32 +189,41 @@ export default function ModsList({ mods }: ModsListProps) {
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<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.map((mod) => (
|
{paginatedMods.length > 0 ? (
|
||||||
<a
|
paginatedMods.map((mod) => (
|
||||||
key={mod.id}
|
<a
|
||||||
href={`/mods/${mod.id}`}
|
key={mod.id}
|
||||||
className="mb-6 flex flex-col gap-4 border-transparent transition-colors duration-100 hover:opacity-90"
|
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
|
<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">
|
||||||
src={mod.image}
|
<img
|
||||||
alt={mod.name}
|
src={mod.image}
|
||||||
loading="lazy"
|
alt={mod.name}
|
||||||
className="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
|
loading="lazy"
|
||||||
/>
|
className="h-full w-full object-cover transition-transform duration-100 hover:scale-105"
|
||||||
</div>
|
/>
|
||||||
<div>
|
</div>
|
||||||
<h2 className="text-lg font-bold">
|
<div>
|
||||||
{mod.name}{' '}
|
<h2 className="text-lg font-bold">
|
||||||
<span className="ml-1 text-sm font-normal">
|
{mod.name}{' '}
|
||||||
by @{mod.author}
|
<span className="ml-1 text-sm font-normal">
|
||||||
</span>
|
by @{mod.author}
|
||||||
</h2>
|
</span>
|
||||||
<p className="text-sm font-thin">{mod.description}</p>
|
</h2>
|
||||||
</div>
|
<p className="text-sm font-thin">{mod.description}</p>
|
||||||
</a>
|
</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>
|
</div>
|
||||||
|
|
||||||
{renderPagination()}
|
{renderPagination()}
|
||||||
|
|
|
@ -9,7 +9,7 @@ const mods = (await getAllMods()) || []
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Zen Mods">
|
<Layout title="Zen Mods">
|
||||||
<main class="mt-32 2xl:mt-0">
|
<main class="mx-auto mt-32 max-w-[120rem] 2xl:mt-0">
|
||||||
<header class="mb-10 mt-32 flex w-full flex-col justify-center border-dark">
|
<header class="mb-10 mt-32 flex w-full flex-col justify-center border-dark">
|
||||||
<div class="mx-auto flex flex-col gap-6 px-8 lg:w-1/2">
|
<div class="mx-auto flex flex-col gap-6 px-8 lg:w-1/2">
|
||||||
<div>
|
<div>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue