mirror of
https://github.com/Radiquum/YAMPD.git
synced 2025-05-20 23:59:35 +05:00
67 lines
2 KiB
TypeScript
67 lines
2 KiB
TypeScript
"use client";
|
|
|
|
import { PACK_ENDPOINT, PACKS_ENDPOINT } from "@/api/ENDPOINTS";
|
|
import { Pack } from "@/types/pack";
|
|
import {
|
|
Sidebar,
|
|
SidebarItem,
|
|
SidebarItemGroup,
|
|
SidebarItems,
|
|
} from "flowbite-react";
|
|
import { useEffect, useState } from "react";
|
|
import { HiChartPie, HiPlusCircle } from "react-icons/hi";
|
|
|
|
export const Menu = () => {
|
|
const [packsData, setPacksData] = useState<Pack[]>([]);
|
|
useEffect(() => {
|
|
async function _getPacksData() {
|
|
const res = await fetch(PACKS_ENDPOINT("getPacks"));
|
|
setPacksData(await res.json());
|
|
}
|
|
_getPacksData();
|
|
}, []);
|
|
|
|
return (
|
|
<Sidebar aria-label="Default sidebar example">
|
|
<SidebarItems>
|
|
<SidebarItemGroup>
|
|
<SidebarItem href="/" icon={HiChartPie}>
|
|
Dashboard
|
|
</SidebarItem>
|
|
{packsData &&
|
|
packsData.map((pack) => {
|
|
return (
|
|
<SidebarItem
|
|
href={`/pack?id=${pack._id}`}
|
|
key={pack._id}
|
|
theme={{
|
|
content: {
|
|
base: "p-0!",
|
|
},
|
|
}}
|
|
>
|
|
<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-10 h-10 rounded-md"
|
|
/>
|
|
<div>
|
|
<p className="line-clamp-1">{pack.title}</p>
|
|
<p className="text-sm text-gray-400 line-clamp-1">
|
|
by {pack.author}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</SidebarItem>
|
|
);
|
|
})}
|
|
<SidebarItem href="/pack/new" icon={HiPlusCircle}>
|
|
New mod pack
|
|
</SidebarItem>
|
|
</SidebarItemGroup>
|
|
</SidebarItems>
|
|
</Sidebar>
|
|
);
|
|
};
|