Documentation

Class: Card

Description: The Card component is a reusable React component that displays a card with a title, statistic, and optional content. It provides flexibility to customize the appearance and content of the card.

Methods

Method: _format

Description: The _format function is a utility function used within the Card component to format the stat value based on the provided mode. It handles different display formats for time and money, and returns the formatted value or the original stat if no matching mode is found.

Parameters:

  • stat (Object | String | Number): The statistic value to be formatted.
  • mode (String): The formatting mode. Available modes include "time" and "money".

Returns:

  • React.ReactNode: The formatted statistic value as a React node.

Example:

const formattedStat = _format({ days: 2, hours: 10 }, "time");

The formattedStat will be a React node displaying "2 days 10 hours" in the time format.

Method: Card

Description: The Card component renders a card container with a title, statistic, and optional content. It utilizes the _format function to display the statistic in the appropriate format based on the mode prop. The invert prop determines the order of the title and statistic within the card.

Parameters:

  • stat (Object | String | Number): The statistic value to be displayed.
  • mode (String): The formatting mode for the statistic.
  • title (String): The title to be displayed in the card.
  • className (String): Optional custom class names for the card container.
  • invert (Boolean): Flag to invert the order of title and statistic.
  • children (React.ReactNode): Optional content to be displayed within the card.

Returns:

  • React.ReactNode: The rendered card component.

Example:

<Card stat={1000} mode="money" title="Balance" invert={true} />

This will render a card with the title "Balance" on top, followed by "$1,000.00" in the money format.

Considerations:

  • The mode prop is used to control the formatting of the stat. Make sure to provide a valid mode ("time" or "money") to achieve the desired output.
  • The invert prop determines the order of title and statistic within the card.
  • You can customize the appearance of the card using the className prop.
  • You can add additional content to the card by passing in children as a prop.
  • Make sure to import the formatMoney function from "@/utils/Helpers" if using the "money" mode.

Potential Pitfalls:

  • If an invalid mode is provided, the _format function will return the original stat value.
  • If the stat value is not a valid number or object with the expected properties (days, hours, minutes, seconds), the time formatting might not work as expected.