70 lines
2.2 KiB
TypeScript
70 lines
2.2 KiB
TypeScript
import React from "react";
|
|
|
|
// Define the prop types
|
|
interface SkeletonUIProps {
|
|
type: "asset" | "assetLibrary" | "assetWidget" | "default"; // You can expand this with other types as needed
|
|
}
|
|
|
|
// Define the SkeletonUI component
|
|
const SkeletonUI: React.FC<SkeletonUIProps> = ({ type }) => {
|
|
|
|
// Function to render skeleton content based on 'type'
|
|
const renderSkeleton = () => {
|
|
switch (type) {
|
|
case "assetLibrary":
|
|
return (
|
|
<>
|
|
{Array(5)
|
|
.fill(null) // Create an array of 5 empty items
|
|
.map((_, index) => (
|
|
<div key={index} className="skeleton-content">
|
|
<div className="skeleton asset-image"></div>
|
|
<div className="skeleton asset-details"></div>
|
|
<div className="skeleton organization"></div>
|
|
<div className="skeleton asset-review"></div>
|
|
<div className="skeleton button"></div>
|
|
</div>
|
|
))}
|
|
</>
|
|
);
|
|
|
|
case "assetWidget":
|
|
return (
|
|
<div className="skeleton-content">
|
|
<div className="skeleton skeleton-widget"></div>
|
|
<div className="skeleton skeleton-widget"></div>
|
|
</div>
|
|
);
|
|
case "asset":
|
|
return (
|
|
<>
|
|
<div className="skeleton-content">
|
|
<div className="skeleton asset-name"></div>
|
|
<div className="skeleton asset"></div>
|
|
</div>
|
|
<div className="skeleton-content">
|
|
<div className="skeleton asset-name"></div>
|
|
<div className="skeleton asset"></div>
|
|
</div>
|
|
</>
|
|
);
|
|
|
|
default:
|
|
return (
|
|
<div className="skeleton-content">
|
|
<div className="skeleton-header">
|
|
<div className="skeleton skeleton-title"></div>
|
|
<div className="skeleton skeleton-subtitle"></div>
|
|
</div>
|
|
<div className="skeleton skeleton-card"></div>
|
|
<div className="skeleton skeleton-card"></div>
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
return <div className="skeleton-wrapper">{renderSkeleton()}</div>;
|
|
};
|
|
|
|
export default SkeletonUI;
|