Untitled

import Image from 'next/image';
import Link from 'next/link';
import { ImBin } from 'react-icons/im';
import { MdEditNote } from 'react-icons/md';

export default function NewsListView({ news, deleteNewsModalHandler }) {
  return (
    <div className="grid grid-cols-12 items-center bg-gray-100 rounded-md gap-x-5 p-2">
      <div className="col-span-2">
        <Image
          src={news?.image}
          alt="News Image"
          width={0}
          height={0}
          sizes="100vw"
          className="w-40 h-32"
        />
      </div>
      <div className="col-span-4">
        <p className="font-medium">
          {news?.title.length > 100
            ? `${news.title.slice(0, 100)}...`
            : news.title}
        </p>
      </div>
      <div className="col-span-2 justify-self-center">
        <p className="font-medium">{news.publish_date}</p>
      </div>
      <div className="col-span-2 justify-self-center">
        {news.status === '1' ? (
          <div class="badge badge-info">Active</div>
        ) : (
          <div class="badge badge-error">Inactive</div>
        )}
      </div>
      <div className="col-span-2 justify-self-center">
        <Link
          className="btn btn-sm btn-warning"
          href={`/xoomadmin/news/update/${news._id}`}
        >
          Edit <MdEditNote className="text-xl" />
        </Link>{' '}
        <button
          className="btn btn-sm btn-error"
          onClick={() => deleteNewsModalHandler(news)}
        >
          Delete <ImBin className="text-xl" />
        </button>
      </div>
    </div>
  );
}