@wonderflow/react-components
Version:
UI components from Wonderflow's Wanda design system
33 lines (32 loc) • 2.92 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
/*
* Copyright 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 { forwardRef } from 'react';
import { ClampText, Elevator, IconButton, Popover, Skeleton, Stack, Text, } from '../../..';
import * as styles from './product-card-header.module.css';
export const ProductCardHeader = forwardRef(({ subtitle, title, titleRows = 3, description, descriptionRows = 3, menuActions, isLoading = false, }, forwardedRef) => {
const titleRem = 1.75;
const descriptionRem = 1.25;
const dynamicStyle = {
'--header-title-height': `${(titleRows ?? 0) * titleRem}rem`,
'--header-description-height': `${(descriptionRows ?? 0) * descriptionRem}rem`,
};
if (isLoading) {
return (_jsxs(Stack, { direction: "row", vPadding: 24, hPadding: 24, columnGap: 8, children: [_jsxs(Stack, { style: { width: '100%' }, rowGap: 8, children: [_jsxs("div", { children: [subtitle && _jsx(Skeleton, { count: 1, width: "50%" }), title && _jsx("div", { children: _jsx(Skeleton, { count: 1, height: "28px", width: "60%" }) })] }), description && _jsx("div", { children: _jsx(Skeleton, { count: 1, width: "80%" }) })] }), menuActions && _jsx(Skeleton, { count: 1, width: "24px", height: "24px" })] }));
}
return (_jsxs(Stack, { columnGap: 8, vPadding: 24, direction: "row", hPadding: 24, ref: forwardedRef, style: { ...dynamicStyle }, children: [_jsxs(Stack, { rowGap: 8, children: [_jsxs("div", { children: [subtitle && _jsx(Text, { variant: "subtitle-2", className: styles.Subtitle, children: subtitle }), title && (_jsx("div", { className: styles.Title, children: _jsx(ClampText, { rows: titleRows, children: _jsx(Text, { variant: "heading-6", children: title }) }) }))] }), description && (_jsx("div", { className: styles.Description, children: _jsx(ClampText, { rows: descriptionRows, children: _jsx(Text, { variant: "body-2", children: description }) }) }))] }), menuActions && (_jsx(Stack, { maxWidth: "1.5rem", fill: false, children: _jsx(Popover, { trigger: _jsx(IconButton, { icon: "more-vert", kind: "flat", dimension: "small" }), placement: "bottom-start", offset: 8, closeOnOutsideClick: true, children: _jsx(Elevator, { resting: 1, children: _jsx(_Fragment, { children: menuActions }) }) }) }))] }));
});
ProductCardHeader.displayName = 'ProductCardHeader';