@vectara/vectara-ui
Version:
Vectara's design system, codified as a React and Sass component library
22 lines (21 loc) • 2.43 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiText } from "../typography/Text";
import { VuiIcon } from "../icon/Icon";
import { BiImage, BiError } from "react-icons/bi";
import { VuiTextColor } from "../typography/TextColor";
export const VuiImage = ({ src, alt, caption, className, onClick, isLoading = false, isFailure = false, aspectRatio }) => {
const imageWrapperClasses = classNames("vuiImage__imageWrapper", className, {
"vuiImage__imageWrapper--clickable": onClick
});
if (isLoading) {
return (_jsx("div", Object.assign({ className: "vuiImage__placeholder" }, { children: _jsx("div", Object.assign({ className: "vuiImage__iconWrapper" }, { children: _jsx(VuiIcon, Object.assign({ color: "subdued", size: "xxxl" }, { children: _jsx(BiImage, {}) })) })) })));
}
if (isFailure) {
return (_jsx("div", Object.assign({ className: "vuiImage__placeholder vuiImage__placeholder--error" }, { children: _jsxs(VuiFlexContainer, Object.assign({ direction: "column", alignItems: "center", justifyContent: "center", spacing: "s" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx("div", Object.assign({ className: "vuiImage__iconWrapper" }, { children: _jsx(VuiIcon, Object.assign({ size: "m", color: "danger" }, { children: _jsx(BiError, {}) })) })) })), _jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "s", align: "center" }, { children: _jsx("p", { children: "Missing image" }) })) }))] })) })));
}
const WrapperEl = onClick ? "button" : "div";
return (_jsx(VuiFlexContainer, Object.assign({ direction: "column", spacing: "s" }, { children: _jsxs("figure", { children: [_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(WrapperEl, Object.assign({ className: imageWrapperClasses, onClick: onClick }, { children: _jsx("img", { src: src, alt: alt, className: "vuiImage__image", style: { aspectRatio } }) })) })), caption && (_jsx(VuiFlexItem, Object.assign({ grow: false }, { children: _jsx(VuiText, Object.assign({ size: "s", className: "vuiImage__caption" }, { children: _jsx("figcaption", { children: _jsx(VuiTextColor, Object.assign({ color: "subdued" }, { children: caption })) }) })) })))] }) })));
};