Dashboard/ui/components/StatsCard/StatsCard.tsx

"use client";
/*
 * Documentation:
 * Stats Card — https://app.subframe.com/f023064a5ca0/library?component=Stats+Card_63f809c7-22ef-47f8-9fb9-0f33b252be3f
 */

import React from "react";
import { FeatherArrowRight } from "@subframe/core";
import { FeatherDollarSign } from "@subframe/core";
import { FeatherTrendingDown } from "@subframe/core";
import { FeatherTrendingUp } from "@subframe/core";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface StatsCardRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  trend?: "positive" | "negative" | "neutral";
  label?: React.ReactNode;
  value?: React.ReactNode;
  percentage?: React.ReactNode;
  comparisonText?: React.ReactNode;
  icon?: React.ReactNode;
  className?: string;
}

const StatsCardRoot = React.forwardRef<HTMLDivElement, StatsCardRootProps>(
  function StatsCardRoot(
    {
      trend = "positive",
      label,
      value,
      percentage,
      comparisonText,
      icon = <FeatherDollarSign />,
      className,
      ...otherProps
    }: StatsCardRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/63f809c7 flex w-full cursor-pointer flex-col items-start gap-3 rounded-md border border-solid border-border-default bg-surface-neutral-primary px-4 py-4 hover:shadow-lg",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div className="flex w-full flex-col items-start gap-5">
          <div className="flex w-full items-center justify-between">
            {label ? (
              <span className="text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary">
                {label}
              </span>
            ) : null}
            {icon ? (
              <SubframeCore.IconWrapper className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary">
                {icon}
              </SubframeCore.IconWrapper>
            ) : null}
          </div>
          {value ? (
            <span className="text-subtitle-0 font-subtitle-0 text-text-neutral-primary">
              {value}
            </span>
          ) : null}
          <div className="flex items-center gap-1">
            <div className="flex items-center gap-2">
              <FeatherTrendingDown
                className={SubframeUtils.twClassNames(
                  "hidden text-body-large-0 font-body-large-0 text-icon-feedback-negative",
                  { "inline-flex": trend === "negative" }
                )}
              />
              <FeatherArrowRight
                className={SubframeUtils.twClassNames(
                  "hidden text-body-large-0 font-body-large-0 text-icon-neutral-tertiary",
                  { "inline-flex": trend === "neutral" }
                )}
              />
              <FeatherTrendingUp
                className={SubframeUtils.twClassNames(
                  "text-body-large-0 font-body-large-0 text-icon-feedback-positive",
                  { hidden: trend === "neutral" || trend === "negative" }
                )}
              />
              {percentage ? (
                <span
                  className={SubframeUtils.twClassNames(
                    "text-body-small-regular-0 font-body-small-regular-0 text-text-feedback-positive",
                    {
                      "text-text-feedback-neutral": trend === "neutral",
                      "text-text-feedback-negative": trend === "negative",
                    }
                  )}
                >
                  {percentage}
                </span>
              ) : null}
            </div>
            {comparisonText ? (
              <span className="text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary">
                {comparisonText}
              </span>
            ) : null}
          </div>
        </div>
      </div>
    );
  }
);

export const StatsCard = StatsCardRoot;