lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
37 lines • 3.48 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Skeleton = Skeleton;
exports.TemplateCardSkeleton = TemplateCardSkeleton;
const jsx_runtime_1 = require("react/jsx-runtime");
const utils_1 = require("@/components/lib/utils");
function Skeleton({ className, variant = "default", width, height, animation = "pulse", shimmer = false, count = 1, ...props }) {
// Variant classes
const variantClasses = {
default: "rounded-md",
circle: "rounded-full",
rounded: "rounded-xl",
square: "rounded-none"
};
// Animation classes
const animationClasses = {
pulse: "animate-pulse",
wave: "animate-shimmer",
none: ""
};
// Style object for width and height
const style = {
width: width !== undefined ? (typeof width === "number" ? `${width}px` : width) : undefined,
height: height !== undefined ? (typeof height === "number" ? `${height}px` : height) : undefined,
...props.style
};
// Render multiple skeleton items if count > 1
if (count > 1) {
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("flex flex-col gap-2", className), ...props, children: Array.from({ length: count }).map((_, index) => ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-muted relative overflow-hidden", variantClasses[variant], animationClasses[animation], shimmer && "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent"), style: style }, index))) }));
}
return ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)("bg-primary/20 relative overflow-hidden", variantClasses[variant], animationClasses[animation], shimmer && "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/20 before:to-transparent", className), style: style, ...props }));
}
// Template Card Skeleton component for reuse
function TemplateCardSkeleton() {
return ((0, jsx_runtime_1.jsx)("div", { className: "rounded-lg border bg-card overflow-hidden shadow-sm", children: (0, jsx_runtime_1.jsxs)("div", { className: "space-y-3", children: [(0, jsx_runtime_1.jsx)(Skeleton, { className: "h-48 w-full rounded-t-lg rounded-b-none", shimmer: true }), (0, jsx_runtime_1.jsxs)("div", { className: "p-4 space-y-3", children: [(0, jsx_runtime_1.jsx)(Skeleton, { className: "h-6 w-3/4", shimmer: true }), (0, jsx_runtime_1.jsxs)("div", { className: "space-y-2", children: [(0, jsx_runtime_1.jsx)(Skeleton, { className: "h-4 w-full", shimmer: true }), (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-4 w-5/6", shimmer: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-wrap gap-2 pt-2", children: [(0, jsx_runtime_1.jsx)(Skeleton, { className: "h-5 w-16 rounded-full", shimmer: true }), (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-5 w-20 rounded-full", shimmer: true }), (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-5 w-14 rounded-full", shimmer: true })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center pt-3", children: [(0, jsx_runtime_1.jsx)(Skeleton, { className: "h-6 w-20", shimmer: true }), (0, jsx_runtime_1.jsx)(Skeleton, { className: "h-9 w-28 rounded-md", shimmer: true })] })] })] }) }));
}
//# sourceMappingURL=skeleton.js.map