Radiquum/YAMPD
1
0
Fork 0
mirror of https://github.com/Radiquum/YAMPD.git synced 2025-05-20 07:39:35 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

add empty state if no modpacks is added

Browse source
This commit is contained in:
Kentai Radiquum 2025-05-05 23:21:30 +05:00
parent bb9ccaa6f1
commit afc9504dd2
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
1 changed files with 41 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

73
gui/app/page.tsx
View file

@ -5,6 +5,7 @@ import { Pack } from "@/types/pack";
import { Card, Spinner } from "flowbite-react"; import { Card, Spinner } from "flowbite-react";
import Link from "next/link"; import Link from "next/link";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { GiTumbleweed } from "react-icons/gi";
export default function Home() { export default function Home() {
const [packsData, setPacksData] = useState<Pack[]>([]); const [packsData, setPacksData] = useState<Pack[]>([]);
@ -21,39 +22,47 @@ export default function Home() {
return ( return (
<div> <div>
{packsDataLoading && ( {!packsDataLoading ? (
<div className="w-full flex justify-center items-center"> packsData.length > 0 ? (
<Spinner></Spinner> <div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-2">
</div> {packsData.map((pack) => {
)} return (
{!packsDataLoading && ( <Link key={pack._id} href={`/pack/?id=${pack._id}`}>
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-2"> <Card>
{packsData.map((pack) => { <div className="flex gap-2 items-center">
return ( {/* eslint-disable-next-line @next/next/no-img-element */}
<Link key={pack._id} href={`/pack/?id=${pack._id}`}> <img
<Card> alt=""
<div className="flex gap-2 items-center"> src={PACK_ENDPOINT("getPackImage", pack._id)}
{/* eslint-disable-next-line @next/next/no-img-element */} className="w-12 h-12 rounded-md"
<img />
alt="" <div>
src={PACK_ENDPOINT("getPackImage", pack._id)} <p className="text-xl font-semibold">{pack.title}</p>
className="w-12 h-12 rounded-md" <p className="text-sm text-gray-400">
/> by {pack.author}
<div> </p>
<p className="text-xl font-semibold">{pack.title}</p> </div>
<p className="text-sm text-gray-400">by {pack.author}</p>
</div> </div>
</div> <div className="flex gap-2 items-center">
<div className="flex gap-2 items-center"> <p className="text-lg">{pack.modloader}</p>
<p className="text-lg">{pack.modloader}</p> <p className="text-lg">{pack.version}</p>
<p className="text-lg">{pack.version}</p> <span> | </span>
<span> | </span> <p>{pack.mods.length} mods</p>
<p>{pack.mods.length} mods</p> </div>
</div> </Card>
</Card> </Link>
</Link> );
); })}
})} </div>
) : (
<div className="h-screen flex flex-col items-center justify-center gap-4">
<GiTumbleweed className="w-64 h-64 text-gray-400" />
<p className="text-gray-400">Nothing but weeds here... try to create a new pack</p>
</div>
)
) : (
<div className="h-screen flex items-center justify-center">
<Spinner size="xl"></Spinner>
</div> </div>
)} )}
</div> </div>