page.jsx

"use client";

import React from "react";
import AddFolder from "@/components/AddFolder";
import AddCollection from "@/components/AddCollection";
import Cards from "@/components/Cards";
import Collections from "@/components/Collections";
import { useRequest } from "ahooks";
import { getFetch } from "@/lib/doFetch";
import { Image } from "@nextui-org/react";

export default function Home(props) {
  const { data, refreshAsync, refresh } = useRequest(async () => {
    const res = await getFetch({ url: "/api/folder", params: {} });
    return res?.data ?? [];
  });

  const collection = useRequest(async () => {
    const res = await getFetch({ url: "/api/collection", params: {} });
    return res?.data ?? [];
  });
  return (
    <div>
      <div className="flex gap-4">
        <AddFolder refresh={refreshAsync} />
        <AddCollection refresh={collection?.refreshAsync} />
      </div>
      <div className="flex gap-4">
      <Cards list={data ?? []} />
      <Collections list={collection?.data ?? []} />
      {data?.length === 0 &&collection?.data?.length ===0 &&  (
        <Image
          alt="empty"
          isZoomed
          className="object-cover"
          src="/empty.png"
          width={240}
        />
      )}
      </div>
    </div>
  );
}