Dashboard/ui/components/IconWithBackground/IconWithBackground.tsx

"use client";
/*
 * Documentation:
 * Icon with Background — https://app.subframe.com/f023064a5ca0/library?component=Icon+with+Background_4a18e9fc-cea3-46ca-8c53-2412462342ad
 */

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

export interface IconFeedbackIconProps
  extends React.ComponentProps<typeof SubframeCore.IconWrapper> {
  variant?:
    | "primary"
    | "secondary"
    | "tertiary"
    | "destructive"
    | "neutral"
    | "success"
    | "warning"
    | "information";
  size?: "medium" | "small" | "large";
  icon?: React.ReactNode;
  className?: string;
}

const IconFeedbackIcon = React.forwardRef<
  React.ElementRef<typeof SubframeCore.IconWrapper>,
  IconFeedbackIconProps
>(function IconFeedbackIcon(
  {
    variant = "primary",
    size = "medium",
    icon = <FeatherFlag />,
    className,
    ...otherProps
  }: IconFeedbackIconProps,
  ref
) {
  return icon ? (
    <SubframeCore.IconWrapper
      className={SubframeUtils.twClassNames(
        "group/8e5c09be text-body-large-0 font-body-large-0 text-icon-neutral-primary relative",
        {
          "text-heading-0 font-heading-0": size === "large",
          "text-body-default-regular-0 font-body-default-regular-0":
            size === "small",
          "text-icon-feedback-information": variant === "information",
          "text-icon-feedback-warning": variant === "warning",
          "text-icon-feedback-positive": variant === "success",
          "text-icon-feedback-negative": variant === "destructive",
          "text-icon-neutral-tertiary": variant === "tertiary",
          "text-icon-neutral-secondary": variant === "secondary",
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {icon}
    </SubframeCore.IconWrapper>
  ) : null;
});

export interface IconWithBackgroundRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  variant?:
    | "primary"
    | "secondary"
    | "tertiary"
    | "destructive"
    | "neutral"
    | "success"
    | "warning"
    | "information";
  size?:
    | "extra-small"
    | "small"
    | "medium"
    | "large"
    | "extra-large"
    | "2-x-large"
    | "3-x-large";
  round?: boolean;
  icon?: React.ReactNode;
  className?: string;
}

const IconWithBackgroundRoot = React.forwardRef<
  HTMLDivElement,
  IconWithBackgroundRootProps
>(function IconWithBackgroundRoot(
  {
    variant = "primary",
    size = "medium",
    round = false,
    icon = <FeatherMail />,
    className,
    ...otherProps
  }: IconWithBackgroundRootProps,
  ref
) {
  return (
    <div
      className={SubframeUtils.twClassNames(
        "group/4a18e9fc flex flex-col items-center justify-center gap-2 rounded-sm bg-brand-brand-surface-subtle-default px-1.5 py-1.5",
        {
          "rounded-round": round,
          "px-4 py-4":
            size === "3-x-large" ||
            size === "2-x-large" ||
            size === "extra-large",
          "px-2.5 py-2.5": size === "large",
          "bg-surface-feedback-subtle-information": variant === "information",
          "bg-surface-feedback-subtle-warning": variant === "warning",
          "bg-surface-feedback-subtle-positive": variant === "success",
          "bg-surface-feedback-subtle-neutral": variant === "neutral",
          "bg-surface-feedback-subtle-negative": variant === "destructive",
          "bg-surface-neutral-tertiary": variant === "tertiary",
          "bg-surface-neutral-secondary": variant === "secondary",
        },
        className
      )}
      ref={ref}
      {...otherProps}
    >
      {icon ? (
        <SubframeCore.IconWrapper
          className={SubframeUtils.twClassNames(
            "text-body-large-0 font-body-large-0 text-icon-neutral-primary relative",
            {
              "text-title-hero font-title-hero": size === "3-x-large",
              "text-title-page font-title-page": size === "2-x-large",
              "text-subtitle-0 font-subtitle-0": size === "extra-large",
              "text-heading-0 font-heading-0": size === "large",
              "text-body-default-regular-0 font-body-default-regular-0":
                size === "small",
              "text-body-small-semibold-0 font-body-small-semibold-0":
                size === "extra-small",
              "text-icon-feedback-information": variant === "information",
              "text-icon-feedback-warning": variant === "warning",
              "text-icon-feedback-positive": variant === "success",
              "text-icon-feedback-negative": variant === "destructive",
              "text-icon-neutral-tertiary": variant === "tertiary",
              "text-icon-neutral-secondary": variant === "secondary",
            }
          )}
        >
          {icon}
        </SubframeCore.IconWrapper>
      ) : null}
    </div>
  );
});

export const IconWithBackground = Object.assign(IconWithBackgroundRoot, {
  IconFeedbackIcon,
});