mirror of
https://github.com/prowler-cloud/prowler.git
synced 2026-07-24 04:51:51 +00:00
Alan Buscaglia
4d5676f00e
Co-authored-by: Alan Buscaglia <alanbuscaglia@MacBook-Pro.local> Co-authored-by: alejandrobailo <alejandrobailo94@gmail.com> Co-authored-by: César Arroba <cesar@prowler.com> Co-authored-by: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import React from "react";
|
|
|
|
export const SkeletonFindingDetails = () => {
|
|
return (
|
|
<div className="dark:bg-prowler-blue-400 flex animate-pulse flex-col gap-6 rounded-lg p-4 shadow">
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between">
|
|
<div className="bg-default-200 h-6 w-2/3 rounded" />
|
|
<div className="flex items-center gap-x-4">
|
|
<div className="bg-default-200 h-5 w-6 rounded-full" />
|
|
<div className="bg-default-200 h-6 w-20 rounded" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Metadata Section */}
|
|
<div className="flex flex-wrap gap-4">
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<div key={index} className="flex flex-col gap-1">
|
|
<div className="bg-default-200 h-4 w-20 rounded" />
|
|
<div className="bg-default-200 h-5 w-40 rounded" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* InfoField Blocks */}
|
|
{Array.from({ length: 3 }).map((_, index) => (
|
|
<div key={index} className="flex flex-col gap-2">
|
|
<div className="bg-default-200 h-4 w-28 rounded" />
|
|
<div className="bg-default-200 h-5 w-full rounded" />
|
|
</div>
|
|
))}
|
|
|
|
{/* Risk and Description Sections */}
|
|
<div className="flex flex-col gap-2">
|
|
<div className="bg-default-200 h-4 w-28 rounded" />
|
|
<div className="bg-default-200 h-16 w-full rounded" />
|
|
</div>
|
|
|
|
<div className="bg-default-200 h-4 w-36 rounded" />
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<div className="bg-default-200 h-4 w-24 rounded" />
|
|
<div className="bg-default-200 h-5 w-2/3 rounded" />
|
|
<div className="bg-default-200 h-4 w-24 rounded" />
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-2">
|
|
<div className="bg-default-200 h-4 w-28 rounded" />
|
|
<div className="bg-default-200 h-10 w-full rounded" />
|
|
</div>
|
|
|
|
{/* Additional Resources */}
|
|
<div className="flex flex-col gap-2">
|
|
<div className="bg-default-200 h-4 w-36 rounded" />
|
|
<div className="bg-default-200 h-5 w-32 rounded" />
|
|
</div>
|
|
|
|
{/* Categories */}
|
|
<div className="flex flex-col gap-2">
|
|
<div className="bg-default-200 h-4 w-24 rounded" />
|
|
<div className="bg-default-200 h-5 w-1/3 rounded" />
|
|
</div>
|
|
|
|
{/* Provider Info Section */}
|
|
<div className="mt-4 flex items-center gap-2">
|
|
<div className="bg-default-200 relative h-8 w-8 rounded-full">
|
|
<div className="bg-default-300 absolute top-0 right-0 h-2 w-2 rounded-full" />
|
|
</div>
|
|
<div className="flex max-w-[120px] flex-col gap-1">
|
|
<div className="bg-default-200 h-4 w-full rounded" />
|
|
<div className="bg-default-200 h-4 w-16 rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|