Dashboard/ui/components/StepperHorizontal/StepperHorizontal.tsx

"use client";
/*
 * Documentation:
 * Stepper Horizontal — https://app.subframe.com/f023064a5ca0/library?component=Stepper+Horizontal_3c5d47dc-1b1a-45d9-b244-18422d7bfb56
 */

import React from "react";
import * as SubframeUtils from "../../utils";

export interface StepProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "completed" | "active";
  firstStep?: boolean;
  lastStep?: boolean;
  stepNumber?: React.ReactNode;
  label?: React.ReactNode;
  className?: string;
}

const Step = React.forwardRef<HTMLDivElement, StepProps>(function Step(
  {
    variant = "default",
    firstStep = false,
    lastStep = false,
    stepNumber,
    label,
    className,
    ...otherProps
  }: StepProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/c1145464 flex w-full cursor-pointer flex-col items-center justify-center gap-1",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      <div className="flex w-full items-center justify-center gap-2">
        <div
          className={SubframeUtils.twClassNames(
            "flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-[#d4d4d4]",
            { "bg-transparent": firstStep }
          )}
        />
        <div
          className={SubframeUtils.twClassNames(
            "flex h-7 w-7 flex-none flex-col items-center justify-center gap-2 rounded-round bg-[#f5f5f5]",
            { "bg-[#dbeafe]": variant === "active" || variant === "completed" }
          )}
        >
          {stepNumber ? (
            <span
              className={SubframeUtils.twClassNames(
                "font-['Inter'] text-[12px] font-[500] leading-[16px] text-[#737373]",
                {
                  "text-[#1d4ed8]":
                    variant === "active" || variant === "completed",
                }
              )}
            >
              {stepNumber}
            </span>
          ) : null}
        </div>
        <div
          className={SubframeUtils.twClassNames(
            "flex h-px grow shrink-0 basis-0 flex-col items-center gap-2 bg-[#d4d4d4]",
            { "bg-transparent": lastStep }
          )}
        />
      </div>
      {label ? (
        <span
          className={SubframeUtils.twClassNames(
            "font-['Inter'] text-[14px] font-[400] leading-[20px] text-[#737373] group-hover/c1145464:text-[#171717]",
            {
              "font-[500] tracking-normal text-[#171717]": variant === "active",
            }
          )}
        >
          {label}
        </span>
      ) : null}
    </div>
  );
});

export interface StepperHorizontalRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  children?: React.ReactNode;
  className?: string;
}

const StepperHorizontalRoot = React.forwardRef<
  HTMLDivElement,
  StepperHorizontalRootProps
>(function StepperHorizontalRoot(
  { children, className, ...otherProps }: StepperHorizontalRootProps,
  ref
) {
  return children ? (
    <div
      className={SubframeUtils.twClassNames(
        "flex w-full items-start justify-center",
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {children}
    </div>
  ) : null;
});

export const StepperHorizontal = Object.assign(StepperHorizontalRoot, {
  Step,
});