@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
26 lines (25 loc) • 2.24 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright 2022-2023 Wonderflow Design Team
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { domMax, LazyMotion, m } from 'framer-motion';
import { forwardRef } from 'react';
import { Stack, Symbol, Text, } from '../..';
import * as styles from './info-state.module.css';
export const InfoState = forwardRef(({ className, children, title, icon, image, direction = 'column', iconColor = 'blue', actions, ...otherProps }, forwardedRef) => {
const isHorizontal = direction === 'row';
return (_jsx(Stack, { ref: forwardedRef, direction: direction, rowGap: 24, columnGap: 32, className: className, hAlign: isHorizontal ? 'start' : 'center', vAlign: (isHorizontal && image) ? 'center' : 'start', fill: false, wrap: !!image, ...otherProps, children: _jsxs(LazyMotion, { features: domMax, children: [(!image && icon) && (_jsx(m.span, { "data-info-state-icon-color": iconColor, className: styles.IconWrapper, children: _jsx(Symbol, { source: icon, dimension: 48 }) })), (image && !icon) && _jsx("img", { className: styles.Image, alt: "", width: "400", src: image, loading: "lazy", decoding: "async" }), _jsxs(Stack, { rowGap: 16, hAlign: isHorizontal ? 'start' : 'center', vAlign: "center", fill: false, children: [_jsx(Text, { style: { maxWidth: '40ch' }, textAlign: isHorizontal ? 'start' : 'center', variant: "heading-5", children: title }), _jsx(Text, { as: "div", style: { maxWidth: '60ch' }, textAlign: isHorizontal ? 'start' : 'center', children: children }), actions && (_jsx(Stack, { vPadding: 16, inline: true, direction: "row", columnGap: 16, rowGap: 16, wrap: true, children: actions }))] })] }) }));
});
InfoState.displayName = 'InfoState';