64 lines
2.3 KiB
JavaScript
64 lines
2.3 KiB
JavaScript
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
|
|
const JobApplicationSkeleton = ({ count = 5 }) => {
|
|
return (
|
|
<div className="overflow-x-auto">
|
|
<div className="min-w-full overflow-hidden border rounded-md">
|
|
<Table>
|
|
<TableHeader className="bg-muted">
|
|
<TableRow className="text-xs sm:text-sm">
|
|
<TableHead>
|
|
<div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableHead>
|
|
<TableHead>
|
|
<div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableHead>
|
|
<TableHead>
|
|
<div className="h-5 w-[50%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableHead>
|
|
<TableHead>
|
|
<div className="h-5 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableHead>
|
|
<TableHead>
|
|
<div className="h-5 w-[60%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody className="text-xs sm:text-sm">
|
|
{Array(count)
|
|
.fill(0)
|
|
.map((_, index) => (
|
|
<TableRow key={index} className="hover:bg-muted">
|
|
<TableCell>
|
|
<div className="h-4 w-[85%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="h-4 w-[80%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="h-6 w-[75%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="h-4 w-[90%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableCell>
|
|
<TableCell>
|
|
<div className="h-4 w-[70%] bg-gray-200 rounded animate-pulse"></div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default JobApplicationSkeleton;
|