@ui5/webcomponents-react/wrappers/components/NumericSideIndicator/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { useStylesheet } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef } from 'react';
import { ValueColor } from '../../enums/index.js';
import { Text } from '../../webComponents/Text/index.js';
import { classNames, styleData } from './NumericSideIndicator.module.css.js';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * Holds a set of side indicator attributes used in the AnalyticalCardHeader component.
 */
export const NumericSideIndicator = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    number,
    state = ValueColor.None,
    titleText,
    unit,
    className,
    ...rest
  } = props;
  useStylesheet(styleData, NumericSideIndicator.displayName);
  return /*#__PURE__*/_jsxs("div", {
    ref: ref,
    className: clsx(classNames.numericSideIndicator, className),
    ...rest,
    children: [/*#__PURE__*/_jsx("span", {
      className: classNames.title,
      children: titleText
    }), /*#__PURE__*/_jsxs(Text, {
      className: clsx(classNames.value, classNames[`state${state}`]),
      children: [number, unit]
    })]
  });
});
NumericSideIndicator.displayName = 'NumericSideIndicator';