139 lines
3.9 KiB
JavaScript
139 lines
3.9 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
import {
|
|
StyledContainer,
|
|
StyledHeader,
|
|
StyledExternalLink,
|
|
StyledInternalLink,
|
|
StyledOwner,
|
|
StyledBody,
|
|
StyledItem,
|
|
} from "./StyledSharingPanel";
|
|
import RectangleLoader from "../RectangleLoader/RectangleLoader";
|
|
|
|
const SharingPanelLoader = ({ id, className, style, ...rest }) => {
|
|
return (
|
|
<StyledContainer>
|
|
<StyledHeader>
|
|
<RectangleLoader width={"283px"} height={"29px"} />
|
|
<RectangleLoader width={"48px"} height={"29px"} />
|
|
</StyledHeader>
|
|
|
|
<StyledExternalLink>
|
|
<RectangleLoader
|
|
className="rectangle-loader"
|
|
width={"146px"}
|
|
height={"22px"}
|
|
/>
|
|
<RectangleLoader
|
|
className="rectangle-loader"
|
|
width={"448px"}
|
|
height={"32px"}
|
|
/>
|
|
<RectangleLoader width={"184px"} height={"20px"} />
|
|
</StyledExternalLink>
|
|
|
|
<StyledInternalLink>
|
|
<RectangleLoader width={"99px"} height={"22px"} />
|
|
<RectangleLoader width={"30px"} height={"22px"} />
|
|
</StyledInternalLink>
|
|
|
|
<StyledOwner>
|
|
<div className="owner-info">
|
|
<RectangleLoader
|
|
width={"32px"}
|
|
height={"32px"}
|
|
borderRadius={"1000px"}
|
|
/>
|
|
<RectangleLoader width={"91px"} height={"16px"} />
|
|
</div>
|
|
<RectangleLoader width={"91px"} height={"16px"} />
|
|
</StyledOwner>
|
|
|
|
<StyledBody>
|
|
<StyledItem>
|
|
<div className="item-info">
|
|
<RectangleLoader
|
|
width={"32px"}
|
|
height={"32px"}
|
|
borderRadius={"1000px"}
|
|
/>
|
|
<RectangleLoader width={"91px"} height={"16px"} />
|
|
</div>
|
|
<RectangleLoader width={"45px"} height={"32px"} />
|
|
</StyledItem>
|
|
<StyledItem>
|
|
<div className="item-info">
|
|
<RectangleLoader
|
|
width={"32px"}
|
|
height={"32px"}
|
|
borderRadius={"1000px"}
|
|
/>
|
|
<RectangleLoader width={"91px"} height={"16px"} />
|
|
</div>
|
|
<RectangleLoader width={"45px"} height={"32px"} />
|
|
</StyledItem>
|
|
<StyledItem>
|
|
<div className="item-info">
|
|
<RectangleLoader
|
|
width={"32px"}
|
|
height={"32px"}
|
|
borderRadius={"1000px"}
|
|
/>
|
|
<RectangleLoader width={"91px"} height={"16px"} />
|
|
</div>
|
|
<RectangleLoader width={"45px"} height={"32px"} />
|
|
</StyledItem>
|
|
<StyledItem>
|
|
<div className="item-info">
|
|
<RectangleLoader
|
|
width={"32px"}
|
|
height={"32px"}
|
|
borderRadius={"1000px"}
|
|
/>
|
|
<RectangleLoader width={"91px"} height={"16px"} />
|
|
</div>
|
|
<RectangleLoader width={"45px"} height={"32px"} />
|
|
</StyledItem>
|
|
<StyledItem>
|
|
<div className="item-info">
|
|
<RectangleLoader
|
|
width={"32px"}
|
|
height={"32px"}
|
|
borderRadius={"1000px"}
|
|
/>
|
|
<RectangleLoader width={"91px"} height={"16px"} />
|
|
</div>
|
|
<RectangleLoader width={"45px"} height={"32px"} />
|
|
</StyledItem>
|
|
<StyledItem>
|
|
<div className="item-info">
|
|
<RectangleLoader
|
|
width={"32px"}
|
|
height={"32px"}
|
|
borderRadius={"1000px"}
|
|
/>
|
|
<RectangleLoader width={"91px"} height={"16px"} />
|
|
</div>
|
|
<RectangleLoader width={"45px"} height={"32px"} />
|
|
</StyledItem>
|
|
</StyledBody>
|
|
</StyledContainer>
|
|
);
|
|
};
|
|
|
|
SharingPanelLoader.propTypes = {
|
|
id: PropTypes.string,
|
|
className: PropTypes.string,
|
|
style: PropTypes.object,
|
|
};
|
|
|
|
SharingPanelLoader.defaultProps = {
|
|
id: undefined,
|
|
className: undefined,
|
|
style: undefined,
|
|
};
|
|
|
|
export default SharingPanelLoader;
|