Stats A

Component that represents statistics, numbers,...

Preview

$245k

Revenue

$245k

Revenue

$245k

Revenue

$245k

Revenue

Code

import styles from "./stats-a.module.css"; type ActionType = { icon?: React.ReactElement; title?: string; showTitle?: boolean; onClick?: () => void; }; type Props = { className?: string; children?: React.ReactNode; title?: React.ReactNode; icon?: React.ReactNode; imageSrc?: string; aspect?: "auto" | "square"; horizontalAlign?: "left" | "start" | "center" | "right" | "end"; verticalAlign?: "top" | "center" | "bottom"; rounded?: "none" | "small" | "medium" | "large"; variant?: "default" | "gradient-orange" | "gradient-blue"; actions?: ActionType[]; }; export default function StatsA({ className, children, title, icon, imageSrc, aspect = "auto", horizontalAlign = "center", verticalAlign = "center", rounded = "medium", variant, actions, }: Props) { return ( <div className={[ styles["wrapper"], styles[`ar-${aspect}`], styles[`r-${rounded}`], styles[`va-${verticalAlign}`], styles[`ha-${horizontalAlign}`], styles[`variant-${variant}`], className, ].join(" ")} > <div className={styles["content"]}> {/* If you use Next.js, replace 'img' with 'Image' element */} {imageSrc && ( <img className={[styles["image"]].join(" ")} src={imageSrc} alt={title?.valueOf()?.toString()} width={360} height={360} loading="lazy" /> )} {actions && ( <div className={styles["actions"]}> {actions.map((action, index) => { return ( <button key={`action-${index}`} type="button" className={styles["action-button"]} title={action.title} onClick={() => { action.onClick && action.onClick(); }} > {action.showTitle && ( <div className={styles["text"]}> {action.title} </div> )} <div className={styles["icon"]}>{action.icon}</div> </button> ); })} </div> )} {/* You can replace this content */} {icon && <div className={styles["icon-wrapper"]}>{icon}</div>} {title && <h4 className={styles["title"]}>{title}</h4>} {children && <div className={styles["child-content"]}>{children}</div>} </div> </div> ); }

Design

Figma design file:

Documentation

Properties

Props of the component:

  • className (string): Specifies the CSS class of the component.
  • children (ReactNode): React children of the component. Specifies the ReactNode placed inside the component.
  • title (string or ReactNode): Specifies the text or component that will be used as the title.
  • icon (ReactNode): Specifies the main icon component.
  • imageSrc (string): Specifies the URL of the image.
  • aspect ("auto" | "square"): Specifies the aspect ratio of the frame.
  • horizontalAlign ("left" | "start" | "center" | "right" | "end"): Specifies the horizontal alignment of the content.
  • verticalAlign ("top" | "center" | "bottom"): Specifies the vertical alignment of the content.
  • rounded ("none" | "small" | "medium" | "large"): Specifies the border radius of the frame.
  • variant ("default" | "gradient-orange" | "gradient-blue" or a customized value): Specifies the color or theme variant of the component. Check out the "Sample CSS customization" below for an example of how to use it.
  • actions (Array of ActionType): Specifies the action buttons placed on the top of the component.
ActionType item arguments
  • icon (ReactNode): Specifies the action icon component.
  • title (string): Specifies the action title text.
  • showTitle (boolean): Show or hide title.
  • onClick (function): Fires when the action button is clicked.
Sample CSS customization
.variant-gradient-blue { --fg-color: #ffffff; --bg-color: #2a57fa; } .variant-gradient-blue { background: linear-gradient(to top right, #2a57fa, #5ab8ff); }