@replyke/ui-core-react-js
Version:
Replyke: Build interactive apps with social features like comments, votes, feeds, user lists, notifications, and more.
35 lines • 1.64 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
function Skeleton({ style }) {
return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
@keyframes pulse {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 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 (_jsxs("div", { style: {
display: "flex",
gap: "8px",
width: "100%",
paddingLeft: 16 + extraLeftPadding,
}, children: [_jsx(Skeleton, { style: { height: 32, width: 32, borderRadius: "50%" } }), _jsxs("div", { style: { display: "grid", gap: "8px", flex: 1 }, children: [_jsx(Skeleton, { style: { width: "30%", height: 12 } }), _jsx(Skeleton, { style: { height: 12 } }), _jsx(Skeleton, { style: { width: "15%", height: 12 } })] })] }));
}
function UserMentionSkeleton() {
return (_jsxs("div", { style: {
display: "flex",
gap: "8px",
width: "100%",
alignItems: "center",
}, children: [_jsx(Skeleton, { style: { height: "35px", width: "35px", borderRadius: "100%" } }), _jsx("div", { style: { flex: 1 }, children: _jsx(Skeleton, {}) })] }));
}
export { CommentSkeleton, UserMentionSkeleton, Skeleton };
//# sourceMappingURL=Skeleton.js.map