src/skeletons/technicalSkeleton.tsx
import React from "react";
interface props {
rows: number;
}
const technicalSkeleton: React.FC<props> = ({ rows }) => {
return (
<tbody>
{Array.from({ length: rows }).map((_, index) => (
<tr key={index} className="animate-pulse">
<td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-sm">
<div className="flex">
<div className="w-full h-5 bg-gray-300 dark:bg-gray-700 rounded"></div>
</div>
</td>
<td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-sm">
<div className="flex items-center">
<div className="w-full h-5 bg-gray-300 dark:bg-gray-700 rounded"></div>
</div>
</td>
<td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-sm">
<div className="inline-block w-20 h-5 px-3 py-1 bg-gray-300 dark:bg-gray-700 rounded"></div>
</td>
<td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-sm">
<div className="inline-block w-20 h-5 px-3 py-1 bg-gray-300 dark:bg-gray-700 rounded"></div>
</td>
<td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-sm">
<div className="inline-block w-20 h-5 px-3 py-1 bg-gray-300 dark:bg-gray-700 rounded"></div>
</td>
<td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-sm">
<div className="inline-block w-20 h-5 px-3 py-1 bg-gray-300 dark:bg-gray-700 rounded"></div>
</td>
<td className="px-5 py-5 border-b border-gray-200 dark:border-dark-tertiary text-sm">
<div className="flex justify-center">
<div className="w-10 h-10 bg-gray-300 dark:bg-gray-700 rounded-full"></div>
</div>
</td>
</tr>
))}
</tbody>
);
};
export default technicalSkeleton;