mirror of
https://github.com/Radiquum/YAMPD.git
synced 2025-05-20 15:49:34 +05:00
70 lines
2.4 KiB
TypeScript
70 lines
2.4 KiB
TypeScript
"use client";
|
|
|
|
import { PACK_ENDPOINT, PACKS_ENDPOINT } from "@/api/ENDPOINTS";
|
|
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[]>([]);
|
|
const [packsDataLoading, setPacksDataLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
async function _getPacksData() {
|
|
const res = await fetch(PACKS_ENDPOINT("getPacks"));
|
|
setPacksData(await res.json());
|
|
setPacksDataLoading(false);
|
|
}
|
|
_getPacksData();
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
{!packsDataLoading ? (
|
|
packsData.length > 0 ? (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 2xl:grid-cols-3 gap-2">
|
|
{packsData.map((pack) => {
|
|
return (
|
|
<Link key={pack._id} href={`/pack/?id=${pack._id}`}>
|
|
<Card>
|
|
<div className="flex gap-2 items-center">
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
alt=""
|
|
src={PACK_ENDPOINT("getPackImage", pack._id)}
|
|
className="w-12 h-12 rounded-md"
|
|
/>
|
|
<div>
|
|
<p className="text-xl font-semibold">{pack.title}</p>
|
|
<p className="text-sm text-gray-400">
|
|
by {pack.author}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-2 items-center">
|
|
<p className="text-lg">{pack.modloader}</p>
|
|
<p className="text-lg">{pack.version}</p>
|
|
<span> | </span>
|
|
<p>{pack.mods.length} mods</p>
|
|
</div>
|
|
</Card>
|
|
</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>
|
|
);
|
|
}
|