mirror of
https://github.com/Radiquum/YAMPD.git
synced 2025-05-20 07:39:35 +05:00
add empty state if no modpacks is added
This commit is contained in:
parent
bb9ccaa6f1
commit
afc9504dd2
1 changed files with 41 additions and 32 deletions
|
@ -5,6 +5,7 @@ import { Pack } from "@/types/pack";
|
|||
import { Card, Spinner } from "flowbite-react";
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import { GiTumbleweed } from "react-icons/gi";
|
||||
|
||||
export default function Home() {
|
||||
const [packsData, setPacksData] = useState<Pack[]>([]);
|
||||
|
@ -21,12 +22,8 @@ export default function Home() {
|
|||
|
||||
return (
|
||||
<div>
|
||||
{packsDataLoading && (
|
||||
<div className="w-full flex justify-center items-center">
|
||||
<Spinner></Spinner>
|
||||
</div>
|
||||
)}
|
||||
{!packsDataLoading && (
|
||||
{!packsDataLoading ? (
|
||||
packsData.length > 0 ? (
|
||||
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-2">
|
||||
{packsData.map((pack) => {
|
||||
return (
|
||||
|
@ -41,7 +38,9 @@ export default function Home() {
|
|||
/>
|
||||
<div>
|
||||
<p className="text-xl font-semibold">{pack.title}</p>
|
||||
<p className="text-sm text-gray-400">by {pack.author}</p>
|
||||
<p className="text-sm text-gray-400">
|
||||
by {pack.author}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
|
@ -55,6 +54,16 @@ export default function Home() {
|
|||
);
|
||||
})}
|
||||
</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>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue