@digital-ai/plugin-dai-release
Version:
Frontend functionalities for the dai-release backstage plugin
64 lines (61 loc) • 2.76 kB
JavaScript
import { DotCard, DotSkeleton, DotAvatar, DotCardHeader, DotButton } from '@digital-ai/dot-components';
import React from 'react';
import { makeStyles } from '@material-ui/core';
const WorkflowCardSkeleton = () => {
const useStyles = makeStyles(() => ({
workflowHeaderSec: {
flexWrap: "nowrap"
},
workflowCardSkeletonWrapper: {
width: "100%",
padding: "0 16px"
},
workflowCardSkeletonHeader: {
width: "100%",
display: "flex",
alignItems: "center"
},
avatarSkeleton: {
margin: "0 16px 0 0"
},
headerRight: {
width: "100%"
},
cardContentLineSkeleton: {
width: "100%",
height: "10px",
margin: "6px 0"
},
pillSkeleton: {
height: "30px",
width: "120px",
margin: "16px 0"
},
cardFooter: {
margin: "16px 0"
}
}));
const classes = useStyles();
const renderCardContentLineSkeletons = (numberOfSkeletons) => {
return [...Array(numberOfSkeletons)].map((_, index) => /* @__PURE__ */ React.createElement(
DotSkeleton,
{
className: classes.cardContentLineSkeleton,
key: index,
variant: "rectangular"
}
));
};
return /* @__PURE__ */ React.createElement(DotCard, { className: classes.workflowCardSkeletonWrapper }, /* @__PURE__ */ React.createElement("div", { className: "card-content" }, /* @__PURE__ */ React.createElement("div", { className: classes.workflowCardSkeletonHeader }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(DotSkeleton, { className: classes.avatarSkeleton, variant: "circular" }, /* @__PURE__ */ React.createElement(DotAvatar, { alt: "", text: "", type: "text" }))), /* @__PURE__ */ React.createElement("div", { className: classes.headerRight }, /* @__PURE__ */ React.createElement(DotSkeleton, { "data-testid": "title-skeleton", width: "100%" }, /* @__PURE__ */ React.createElement(
DotCardHeader,
{
avatar: /* @__PURE__ */ React.createElement(DotAvatar, { alt: "", text: "", type: "text" }),
subheader: "",
subheaderSize: "large",
title: "",
titleSize: "large"
}
)))), /* @__PURE__ */ React.createElement("div", null, renderCardContentLineSkeletons(20)), /* @__PURE__ */ React.createElement(DotSkeleton, { className: classes.pillSkeleton, variant: "rectangular" })), /* @__PURE__ */ React.createElement("div", { className: classes.cardFooter }, /* @__PURE__ */ React.createElement(DotSkeleton, { "data-testid": "footer-button-skeleton", variant: "rectangular" }, /* @__PURE__ */ React.createElement(DotButton, { type: "outlined" }, "Run workflow"))));
};
export { WorkflowCardSkeleton };
//# sourceMappingURL=WorkflowCardSkeletonComponent.esm.js.map