Cards.jsx

/* eslint-disable import/no-anonymous-default-export */
/* eslint-disable react/display-name */

import React, { memo } from "react";
import { Card, CardBody, CardFooter, Image } from "@nextui-org/react";
import prisma from "@/lib/prisma";
import { getFetch } from "@/lib/doFetch";
import { difftime } from "@/lib/time";
import { useRouter } from "next/navigation";

export default memo(({ list }) => {
  const router = useRouter();

  return (
    <div className="gap-2 flex flex-wrap">
      {list?.map?.((item, index) => (
        <Card
          shadow="sm"
          className="w-[220px]"
          key={index}
          isPressable
          onPress={() => {
            router.push("/detail/" + item.id);
          }}
        >
          <CardBody className="overflow-visible p-0">
            <Image
              isZoomed
              shadow="sm"
              radius="lg"
              width="100%"
              alt={item.name}
              className="w-full object-cover h-[180px]"
              src={item.poster}
              fallbackSrc="/folder.png"
            />
          </CardBody>
          <CardFooter className="text-small justify-between">
            <b>{item.name}</b>
            <p className="text-default-500">{difftime(item.createdAt)}</p>
          </CardFooter>
        </Card>
      ))}
      {list?.length === 0 && (
        <Image
          alt="empty"
          isZoomed
          className="object-cover"
          src="/empty.png"
          width={240}
        />
      )}
    </div>
  );
});