Stat

The Stat component displays a statistic value with an optional icon and a positive or negative change value.

Preview

Usage

import { Stat } from 'components/lib';

function MyComponent({ ...props }){

  return (
    <div>
      <Stat 
        value="1200" 
        label="Total Sales" 
        change='+10%'
        icon="dollar-sign" 
      />
    </div>
  );
}

Props

Prop	Description	Required	Value
change	positive/negative value indicating change amount	optional	string
className	custom style	required	SCSS or Tailwind
icon	icon name to use	optional	string
label	value label	required	string
value	value	required	integer or string

Notes

• The Stat component uses the Icon and cn functions from 'components/lib' for handling icons and class names, respectively.

• The change prop specifies the change value, which can be positive or negative.

• The className prop allows for custom styling to be applied.

• The icon prop specifies the name of the icon to be displayed.

• The label prop is required and provides a description for the value.

• The value prop is required and represents the numeric or string value to be displayed.

• The changeUp variable is used to determine if the change value is positive or negative.