@replyke/ui-core-react-js
Version:
Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.
39 lines • 1.99 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.CommentSkeleton = CommentSkeleton;
exports.UserMentionSkeleton = UserMentionSkeleton;
exports.Skeleton = Skeleton;
const jsx_runtime_1 = require("react/jsx-runtime");
function Skeleton({ style }) {
return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
` }), (0, jsx_runtime_1.jsx)("div", { style: {
animation: "pulse 1.5s ease-in-out infinite",
width: "100%",
height: 16,
borderRadius: 8,
backgroundColor: "#efefef",
...style,
} })] }));
}
function CommentSkeleton({ extraLeftPadding = 0, }) {
return ((0, jsx_runtime_1.jsxs)("div", { style: {
display: "flex",
gap: "8px",
width: "100%",
paddingLeft: 16 + extraLeftPadding,
}, children: [(0, jsx_runtime_1.jsx)(Skeleton, { style: { height: 32, width: 32, borderRadius: "50%" } }), (0, jsx_runtime_1.jsxs)("div", { style: { display: "grid", gap: "8px", flex: 1 }, children: [(0, jsx_runtime_1.jsx)(Skeleton, { style: { width: "30%", height: 12 } }), (0, jsx_runtime_1.jsx)(Skeleton, { style: { height: 12 } }), (0, jsx_runtime_1.jsx)(Skeleton, { style: { width: "15%", height: 12 } })] })] }));
}
function UserMentionSkeleton() {
return ((0, jsx_runtime_1.jsxs)("div", { style: {
display: "flex",
gap: "8px",
width: "100%",
alignItems: "center",
}, children: [(0, jsx_runtime_1.jsx)(Skeleton, { style: { height: "35px", width: "35px", borderRadius: "100%" } }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 }, children: (0, jsx_runtime_1.jsx)(Skeleton, {}) })] }));
}
//# sourceMappingURL=Skeleton.js.map