275 lines
8.8 KiB
JavaScript
275 lines
8.8 KiB
JavaScript
import React from "react";
|
|
|
|
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
|
<div
|
|
className={`skeleton mb-2 ${className}`}
|
|
style={{
|
|
height,
|
|
width,
|
|
borderRadius: "4px",
|
|
}}
|
|
></div>
|
|
);
|
|
|
|
export const NoteCardSkeleton = () => {
|
|
return (
|
|
<div className="mt-5">
|
|
{Array.from({ length: 3 }).map((_, idx) => (
|
|
<div key={idx} className="card shadow-sm border-1 mb-3 p-3 rounded">
|
|
<div className="d-flex justify-content-between align-items-center mb-1">
|
|
<div className="d-flex align-items-center">
|
|
<div
|
|
className="skeleton rounded-circle me-2"
|
|
style={{ width: 32, height: 32 }}
|
|
></div>
|
|
<div>
|
|
<SkeletonLine height={10} width="150px" />
|
|
<SkeletonLine height={10} width="100px" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Icons */}
|
|
<div className="d-flex gap-2">
|
|
<div
|
|
className="skeleton rounded"
|
|
style={{ width: 20, height: 20 }}
|
|
></div>
|
|
<div
|
|
className="skeleton rounded"
|
|
style={{ width: 20, height: 20 }}
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr className="mt-0 mb-2" />
|
|
|
|
{/* Note Content */}
|
|
<div className="mx-4 px-2 text-start">
|
|
<SkeletonLine height={16} width="90%" />
|
|
<SkeletonLine height={16} width="80%" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const MainDirectoryPageSkeleton = () => {
|
|
return (
|
|
<div className="container-fluid">
|
|
<div className="mt-5 card shadow-sm border-1 mb-3 p-3 rounded">
|
|
{/* Tabs & Export */}
|
|
<div className="d-flex justify-content-between align-items-center mb-3 px-2">
|
|
<div className="d-flex gap-3">
|
|
<SkeletonLine height={30} width="80px" />
|
|
<SkeletonLine height={30} width="90px" />
|
|
</div>
|
|
<SkeletonLine height={30} width="100px" />
|
|
</div>
|
|
|
|
{/* Search / Controls */}
|
|
</div>
|
|
|
|
<NoteCardSkeleton />
|
|
</div>
|
|
);
|
|
};
|
|
// 32702.75
|
|
|
|
// Skeleton for ListViewContact
|
|
export const ListViewContactSkeleton = ({ rows = 5 }) => {
|
|
const columns = ["Name", "Email", "Organization", "Category", "Action"];
|
|
|
|
return (
|
|
<div className="mt-5">
|
|
<div className="card">
|
|
<div className="card-datatable table-responsive">
|
|
<table className="table border-top dataTable text-nowrap">
|
|
<thead>
|
|
<tr className="shadow-sm">
|
|
{columns.map((col) => (
|
|
<th key={col} className="text-center">
|
|
<SkeletonLine height={20} width="80px" />
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody className="px-2">
|
|
{Array.from({ length: rows }).map((_, idx) => (
|
|
<tr key={idx}>
|
|
{/* Name / Avatar */}
|
|
<td className="px-2 py-3">
|
|
<div className="d-flex align-items-center gap-2">
|
|
<div
|
|
className="skeleton rounded-circle"
|
|
style={{ width: 32, height: 32 }}
|
|
></div>
|
|
<SkeletonLine height={12} width="100px" />
|
|
</div>
|
|
</td>
|
|
|
|
{/* Email */}
|
|
<td className="px-2 py-3">
|
|
<SkeletonLine height={12} width="120px" />
|
|
</td>
|
|
|
|
{/* Organization */}
|
|
<td className="px-2 py-3">
|
|
<SkeletonLine height={12} width="120px" />
|
|
</td>
|
|
|
|
{/* Category */}
|
|
<td className="px-2 py-3">
|
|
<SkeletonLine height={12} width="100px" />
|
|
</td>
|
|
|
|
{/* Actions */}
|
|
<td className="px-2 py-3 text-center">
|
|
<div className="d-flex justify-content-center gap-2">
|
|
<div
|
|
className="skeleton rounded"
|
|
style={{ width: 20, height: 20 }}
|
|
></div>
|
|
<div
|
|
className="skeleton rounded"
|
|
style={{ width: 20, height: 20 }}
|
|
></div>
|
|
<div
|
|
className="skeleton rounded"
|
|
style={{ width: 20, height: 20 }}
|
|
></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const CardViewContactSkeleton = ({ rows = 6 }) => {
|
|
return (
|
|
<div className="row mt-3">
|
|
{Array.from({ length: rows }).map((_, idx) => (
|
|
<div key={idx} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
|
|
<div className="card text-start border-1 h-100">
|
|
{/* Header */}
|
|
<div className="card-body px-2 py-2">
|
|
<div className="d-flex justify-content-between align-items-center mb-2">
|
|
<div className="d-flex align-items-center gap-2">
|
|
<div
|
|
className="skeleton rounded-circle"
|
|
style={{ width: 32, height: 32 }}
|
|
/>
|
|
<SkeletonLine height={14} width="120px" />
|
|
</div>
|
|
<div className="d-flex gap-2">
|
|
<div
|
|
className="skeleton rounded"
|
|
style={{ width: 20, height: 20 }}
|
|
/>
|
|
<div
|
|
className="skeleton rounded"
|
|
style={{ width: 20, height: 20 }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<SkeletonLine height={12} width="150px" />
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="card-footer px-3 py-2">
|
|
<SkeletonLine height={12} width="80%" className="mb-1" />
|
|
<SkeletonLine height={12} width="60%" className="mb-1" />
|
|
<SkeletonLine height={12} width="70%" className="mb-1" />
|
|
<div className="d-flex gap-1 mt-1">
|
|
{Array.from({ length: 3 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="skeleton rounded"
|
|
style={{ width: 50, height: 20 }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
export const ContactProfileSkeleton = () => {
|
|
return (
|
|
<div className="p-1">
|
|
{/* Header */}
|
|
<div className="text-center m-0 p-0 mb-3">
|
|
<SkeletonLine width="120px" height={20} className="mx-auto" />
|
|
</div>
|
|
|
|
{/* Avatar and Name */}
|
|
<div className="d-flex align-items-center mb-3">
|
|
<div className="skeleton rounded-circle" style={{ width: 40, height: 40 }} />
|
|
<div className="d-flex flex-column text-start ms-2">
|
|
<SkeletonLine width="120px" height={14} />
|
|
<SkeletonLine width="80px" height={12} className="mt-1" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Two-column details */}
|
|
<div className="row ms-9">
|
|
<div className="col-12 col-md-6 d-flex flex-column text-start">
|
|
{Array.from({ length: 5 }).map((_, idx) => (
|
|
<div key={idx} className="d-flex mb-2 align-items-start">
|
|
<SkeletonLine width="100px" height={12} className="me-2" />
|
|
<SkeletonLine width="150px" height={12} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="col-12 col-md-6 d-flex flex-column text-start">
|
|
{Array.from({ length: 5 }).map((_, idx) => (
|
|
<div key={idx} className="d-flex mb-2 align-items-start">
|
|
<SkeletonLine width="100px" height={12} className="me-2" />
|
|
<SkeletonLine width="150px" height={12} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Projects */}
|
|
|
|
|
|
{/* Description */}
|
|
<div className="d-flex mb-2 align-items-start" style={{ marginLeft: "3rem" }}>
|
|
<SkeletonLine width="100px" height={12} className="me-2" />
|
|
<SkeletonLine width="100%" height={50} />
|
|
</div>
|
|
|
|
<hr className="my-1" />
|
|
|
|
{/* Notes Section */}
|
|
{Array.from({ length: 3 }).map((_, idx) => (
|
|
<div key={idx} className="mb-2">
|
|
<SkeletonLine width="100%" height={60} className="mb-1" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const NoetCard =({cards = 2})=>{
|
|
return(
|
|
<div className="row">
|
|
{Array.from({ length: cards }).map((_, idx) => (
|
|
<div key={idx} className="mb-2">
|
|
<SkeletonLine width="100%" height={60} className="mb-1" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
} |