45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
import React from "react";
|
|
|
|
const SubscriptionPlanSkeleton = () => {
|
|
return (
|
|
<div className="col-xl-4 col-lg-6 col-md-6">
|
|
<div className="card h-100 shadow-sm border-0 p-3 text-center">
|
|
{/* Header */}
|
|
<div className="mb-3">
|
|
<div className="bg-light rounded-circle mx-auto mb-3" style={{ width: "50px", height: "50px" }}></div>
|
|
<div className="bg-light rounded w-75 mx-auto mb-2" style={{ height: "20px" }}></div>
|
|
<div className="bg-light rounded w-50 mx-auto" style={{ height: "16px" }}></div>
|
|
</div>
|
|
|
|
{/* Price */}
|
|
<div className="mb-3">
|
|
<div className="bg-light rounded w-50 mx-auto" style={{ height: "24px" }}></div>
|
|
</div>
|
|
|
|
{/* Storage & Trial */}
|
|
<div className="d-flex justify-content-center gap-4 mb-5">
|
|
<div className="bg-light rounded" style={{ width: "100px", height: "16px" }}></div>
|
|
<div className="bg-light rounded" style={{ width: "100px", height: "16px" }}></div>
|
|
</div>
|
|
|
|
{/* Features */}
|
|
<h6 className="fw-bold text-uppercase border-top pt-3 mb-3 text-center">
|
|
Features
|
|
</h6>
|
|
<ul className="list-unstyled text-start mb-4 ms-7">
|
|
{[1, 2, 3].map((i) => (
|
|
<li key={i} className="mb-3">
|
|
<div className="bg-light rounded" style={{ width: "70%", height: "16px" }}></div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
{/* Button */}
|
|
<div className="bg-light rounded w-100" style={{ height: "40px" }}></div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SubscriptionPlanSkeleton;
|