import React from 'react';

export const SkeletonListItem = () => (
  <li className="flex items-center p-1 first:mt-0 bg-white border-1 border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b">
    <div className="animate-skeleton-pulse grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded">
      <span className="w-6 h-6 bg-gray-200 rounded-full" />
      <div className="w-full d-flex flex-col mx-4">
        <div className="mb-1 w-3/4 h-2 bg-gray-200 rounded" />
        <div className="w-1/2 h-2 bg-gray-200 rounded" />
      </div>
      <div className="ml-auto mx-4 w-12 h-2 bg-gray-200 rounded" />
    </div>
  </li>
);