Dashboard/ui/components/Progress/Progress.tsx

"use client";
/*
 * Documentation:
 * Progress — https://app.subframe.com/f023064a5ca0/library?component=Progress_60964db0-a1bf-428b-b9d5-f34cdf58ea77
 */

import React from "react";
import * as SubframeCore from "@subframe/core";
import * as SubframeUtils from "../../utils";

export interface IndicatorProps
  extends React.ComponentProps<typeof SubframeCore.Progress.Indicator> {
  state?: "default" | "success" | "error";
  className?: string;
}

const Indicator = React.forwardRef<HTMLDivElement, IndicatorProps>(
  function Indicator(
    { state = "default", className, ...otherProps }: IndicatorProps,
    ref
  ) {
    return (
      <SubframeCore.Progress.Indicator asChild={true} {...otherProps}>
        <div
          className={SubframeUtils.twClassNames(
            "group/641ca690 flex h-1.5 w-full min-w-[40px] flex-col items-start gap-2 rounded-round bg-brand-brand-surface-solid-default transition-all",
            {
              "bg-surface-feedback-solid-negative-default": state === "error",
              "bg-surface-feedback-solid-positive-default": state === "success",
            },
            className
          )}
          ref={ref}
        />
      </SubframeCore.Progress.Indicator>
    );
  }
);

export interface ProgressRootProps
  extends React.ComponentProps<typeof SubframeCore.Progress.Root> {
  state?: "uploading" | "success" | "error";
  cardProgress?: boolean;
  hideLabel?: boolean;
  value?: number;
  label?: React.ReactNode;
  statusText?: React.ReactNode;
  className?: string;
}

const ProgressRoot = React.forwardRef<HTMLDivElement, ProgressRootProps>(
  function ProgressRoot(
    {
      state = "uploading",
      cardProgress = false,
      hideLabel = false,
      value = 30,
      label,
      statusText,
      className,
      ...otherProps
    }: ProgressRootProps,
    ref
  ) {
    return (
      <SubframeCore.Progress.Root asChild={true} value={value} {...otherProps}>
        <div
          className={SubframeUtils.twClassNames(
            "group/60964db0 flex w-56 flex-col items-start gap-5",
            { "w-full flex-row items-center gap-2": cardProgress },
            className
          )}
          ref={ref}
        >
          <div
            className={SubframeUtils.twClassNames(
              "flex w-full items-center justify-between",
              { hidden: hideLabel || cardProgress }
            )}
          >
            {label ? (
              <span className="text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary">
                {label}
              </span>
            ) : null}
            {statusText ? (
              <span
                className={SubframeUtils.twClassNames(
                  "text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary",
                  {
                    "text-text-feedback-negative": state === "error",
                    "text-text-feedback-positive": state === "success",
                  }
                )}
              >
                {statusText}
              </span>
            ) : null}
          </div>
          <div className="flex w-full flex-col items-start gap-2 overflow-hidden rounded-round bg-surface-neutral-tertiary">
            <Indicator
              state={
                state === "error"
                  ? "error"
                  : state === "success"
                  ? "success"
                  : undefined
              }
            />
          </div>
          {statusText ? (
            <span
              className={SubframeUtils.twClassNames(
                "hidden text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-tertiary",
                {
                  inline: cardProgress,
                  "text-text-feedback-negative": state === "error",
                  "text-text-feedback-positive": state === "success",
                }
              )}
            >
              {statusText}
            </span>
          ) : null}
        </div>
      </SubframeCore.Progress.Root>
    );
  }
);

export const Progress = Object.assign(ProgressRoot, {
  Indicator,
});