124 lines
3.6 KiB
JavaScript
124 lines
3.6 KiB
JavaScript
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
|
<div
|
|
className={`skeleton mb-2 ${className}`}
|
|
style={{
|
|
height,
|
|
width,
|
|
}}
|
|
></div>
|
|
);
|
|
export const OrgCardSkeleton = () => {
|
|
return (
|
|
<div className="row p-3">
|
|
{[...Array(1)].map((_, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="list-group-item d-flex flex-row gap-2 align-items-start border-0 shadow-sm rounded mb-3 p-3"
|
|
>
|
|
{/* Left: Logo/avatar placeholder */}
|
|
<div className="mt-1">
|
|
<SkeletonLine height={50} width={50} className="rounded-circle" />
|
|
</div>
|
|
|
|
{/* Right: Info section */}
|
|
<div className="d-flex flex-column flex-grow-1 text-start">
|
|
{/* Org name */}
|
|
<SkeletonLine height={18} width="160px" className="mb-2" />
|
|
|
|
{/* SPRID */}
|
|
<div className="d-flex gap-2 mb-2">
|
|
<SkeletonLine height={14} width="60px" />
|
|
<SkeletonLine height={14} width="100px" />
|
|
</div>
|
|
|
|
{/* Address */}
|
|
<div className="d-flex gap-2">
|
|
<SkeletonLine height={14} width="70px" />
|
|
<SkeletonLine height={14} width="100%" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
export const OrgDetailsSkeleton = () => {
|
|
return (
|
|
<div className="row text-start p-3">
|
|
{/* Header */}
|
|
<div className="col-12 mb-3">
|
|
<div className="d-flex justify-content-between align-items-center">
|
|
{/* Logo + Name */}
|
|
<div className="d-flex flex-row gap-2 align-items-center">
|
|
<SkeletonLine height={40} width={40} className="rounded-circle" />
|
|
<SkeletonLine height={18} width="180px" />
|
|
</div>
|
|
|
|
{/* Status Badge */}
|
|
<SkeletonLine height={20} width="70px" className="rounded-pill" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section Title */}
|
|
<div className="d-flex text-secondary mb-2">
|
|
<SkeletonLine height={16} width="140px" />
|
|
</div>
|
|
|
|
{/* Contact Person */}
|
|
<div className="col-md-6 mb-3">
|
|
<div className="d-flex">
|
|
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
<SkeletonLine height={16} width="140px" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Contact Number */}
|
|
<div className="col-md-6 mb-3">
|
|
<div className="d-flex">
|
|
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
<SkeletonLine height={16} width="140px" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div className="col-md-12 mb-3">
|
|
<div className="d-flex">
|
|
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
<SkeletonLine height={16} width="220px" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* SPRID */}
|
|
<div className="col-6 mb-3">
|
|
<div className="d-flex">
|
|
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
<SkeletonLine height={16} width="160px" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Employees */}
|
|
<div className="col-6 mb-3">
|
|
<div className="d-flex">
|
|
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
<SkeletonLine height={16} width="60px" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Address */}
|
|
<div className="col-12 mb-3">
|
|
<div className="d-flex">
|
|
<SkeletonLine height={16} width="130px" className="me-2" />
|
|
<SkeletonLine height={16} width="100%" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Section Title 2 */}
|
|
<div className="d-flex text-secondary mb-2">
|
|
<SkeletonLine height={16} width="200px" />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|