71 lines
1.9 KiB
JavaScript
71 lines
1.9 KiB
JavaScript
import React from "react";
|
|
|
|
const SkeletonCell = ({
|
|
width = "100%",
|
|
height = 20,
|
|
className = "",
|
|
style = {},
|
|
}) => (
|
|
<div
|
|
className={`skeleton ${className}`}
|
|
style={{
|
|
width,
|
|
height,
|
|
borderRadius: 4,
|
|
...style,
|
|
}}
|
|
/>
|
|
);
|
|
|
|
export const DocumentTableSkeleton = ({ rows = 5 }) => {
|
|
return (
|
|
|
|
<table className="card-body table border-top dataTable no-footer dtr-column text-nowrap">
|
|
<thead>
|
|
<tr>
|
|
<th className="text-start">Name</th>
|
|
<th className="text-start">Document Type</th>
|
|
<th className="text-start">Uploaded By</th>
|
|
<th className="text-center">Uploaded on</th>
|
|
<th className="text-center">Status</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody>
|
|
{[...Array(rows)].map((_, idx) => (
|
|
<tr key={idx} className={idx % 2 === 0 ? "odd" : "even"}>
|
|
{/* Name */}
|
|
<td className="text-start">
|
|
<SkeletonCell width="120px" height={16} />
|
|
</td>
|
|
|
|
{/* Document Type */}
|
|
<td className="text-start">
|
|
<SkeletonCell width="100px" height={16} />
|
|
</td>
|
|
|
|
{/* Uploaded By (Avatar + Name) */}
|
|
<td className="text-start">
|
|
<div className="d-flex align-items-center gap-2">
|
|
<SkeletonCell width="30px" height={30} className="rounded-circle" />
|
|
<SkeletonCell width="80px" height={16} />
|
|
</div>
|
|
</td>
|
|
|
|
{/* Uploaded on */}
|
|
<td className="text-center">
|
|
<SkeletonCell width="80px" height={16} />
|
|
</td>
|
|
|
|
{/* Status */}
|
|
<td className="text-center">
|
|
<SkeletonCell width="70px" height={20} className="rounded" />
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
|
|
);
|
|
};
|