import React from "react";

const SkeletonNews: React.FunctionComponent = () => {
  let arr = [1, 2, 3, 4, 5, 6, 7, 8];
  return (
    <>
      {arr.map(() => (
        <div className="border shadow rounded-md p-4 max-w-sm w-full mx-auto">
          <div className="animate-pulse flex space-x-4">
            <div className="bg-gray-200 h-[100px] w-[100px]"></div>
            <div className="flex-1 space-y-6 py-1">
              <div className="h-2 bg-gray-200 rounded"></div>
              <div className="space-y-3">
                <div className="grid grid-cols-3 gap-4">
                  <div className="h-2 bg-gray-200 rounded col-span-2"></div>
                  <div className="h-2 bg-gray-200 rounded col-span-1"></div>
                </div>
                <div className="h-2 bg-gray-200 rounded"></div>
              </div>
            </div>
          </div>
        </div>
      ))}
    </>
  );
};

export default SkeletonNews;