44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
import React from "react";
|
|
|
|
const SkeletonLine = ({ height = 20, width = "100%", className = "" }) => (
|
|
<div
|
|
className={`skeleton mb-2 ${className}`}
|
|
style={{
|
|
height,
|
|
width,
|
|
}}
|
|
></div>
|
|
);
|
|
|
|
export const PaymentHistorySkeleton = ({ count = 2 }) => {
|
|
return (
|
|
<div className="row text-start">
|
|
{[...Array(count)].map((_, idx) => (
|
|
<div className="col-12 mb-2" key={idx}>
|
|
<div className="p-2 border-start border-warning">
|
|
{/* Top Row: Date + Amount */}
|
|
<div className="d-flex justify-content-between align-items-center">
|
|
<SkeletonLine width="150px" height={18} /> {/* Date */}
|
|
<SkeletonLine width="100px" height={18} /> {/* Amount */}
|
|
</div>
|
|
|
|
<div className="row mt-1">
|
|
{/* Transaction ID */}
|
|
<div className="col-12 col-md-6">
|
|
<SkeletonLine width="80%" height={16} />
|
|
</div>
|
|
|
|
{/* Received By (Avatar + Name) */}
|
|
<div className="col-12 col-md-6 d-flex align-items-center gap-2">
|
|
<SkeletonLine width="30px" height={30} className="rounded-circle" /> {/* Avatar */}
|
|
<SkeletonLine width="120px" height={16} /> {/* Name */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|