Dashboard/ui/components/BadgeShortcut/BadgeShortcut.tsx

"use client";
/*
 * Documentation:
 * Badge Shortcut — https://app.subframe.com/f023064a5ca0/library?component=Badge+Shortcut_97bdb082-1124-4dd7-a335-b14b822d0157
 */

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

export interface BadgeShortcutRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  variant?:
    | "neutral"
    | "brand-primary"
    | "brand-secondary"
    | "error"
    | "warning"
    | "success";
  iconLeft1?: React.ReactNode;
  iconLeft2?: React.ReactNode;
  children?: React.ReactNode;
  iconRight?: React.ReactNode;
  size?: "small" | "medium" | "large";
  className?: string;
}

const BadgeShortcutRoot = React.forwardRef<
  HTMLDivElement,
  BadgeShortcutRootProps
>(function BadgeShortcutRoot(
  {
    variant = "neutral",
    iconLeft1 = <FeatherCommand />,
    iconLeft2 = null,
    children,
    iconRight = null,
    size = "medium",
    className,
    ...otherProps
  }: BadgeShortcutRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/97bdb082 flex min-h-[20px] items-center justify-center rounded-sm border border-solid border-surface-feedback-subtle-neutral bg-surface-feedback-subtle-neutral px-1 py-0.5",
        {
          "min-h-[24px] px-1.5 py-1": size === "large",
          "min-h-[14px] px-px py-px": size === "small",
          "border border-solid border-surface-feedback-subtle-positive bg-surface-feedback-subtle-positive":
            variant === "success",
          "border border-solid border-surface-feedback-subtle-warning bg-surface-feedback-subtle-warning":
            variant === "warning",
          "border border-solid border-surface-feedback-subtle-negative bg-surface-feedback-subtle-negative":
            variant === "error",
          "border border-solid border-brand-brand-secondary-surface-subtle-default bg-brand-brand-secondary-surface-subtle-default":
            variant === "brand-secondary",
          "border border-solid border-brand-brand-surface-subtle-default bg-brand-brand-surface-subtle-default":
            variant === "brand-primary",
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {iconLeft1 ? (
        <SubframeCore.IconWrapper
          className={SubframeUtils.twClassNames(
            "font-['Instrument_Sans'] text-[14px] font-[400] leading-[13px] text-icon-neutral-on-subtle",
            {
              "text-brand-brand-surface-solid-default":
                variant === "brand-primary",
            }
          )}
        >
          {iconLeft1}
        </SubframeCore.IconWrapper>
      ) : null}
      {iconLeft2 ? (
        <SubframeCore.IconWrapper
          className={SubframeUtils.twClassNames(
            "font-['Instrument_Sans'] text-[14px] font-[400] leading-[13px] text-icon-neutral-on-subtle",
            {
              "text-brand-brand-surface-solid-default":
                variant === "brand-primary",
            }
          )}
        >
          {iconLeft2}
        </SubframeCore.IconWrapper>
      ) : null}
      {children ? (
        <span className="whitespace-nowrap font-['Instrument_Sans'] text-[14px] font-[400] leading-[14px] text-text-neutral-on-subtle">
          {children}
        </span>
      ) : null}
      {iconRight ? (
        <SubframeCore.IconWrapper
          className={SubframeUtils.twClassNames(
            "font-['Inter'] text-[12px] font-[400] leading-[16px] text-icon-neutral-on-subtle",
            {
              "text-icon-feedback-positive": variant === "success",
              "text-icon-feedback-warning": variant === "warning",
              "text-icon-feedback-negative": variant === "error",
              "text-brand-brand-secondary-surface-solid-default":
                variant === "brand-secondary",
              "text-brand-brand-surface-solid-default":
                variant === "brand-primary",
            }
          )}
        >
          {iconRight}
        </SubframeCore.IconWrapper>
      ) : null}
    </div>
  );
});

export const BadgeShortcut = BadgeShortcutRoot;