Dashboard/ui/components/Icon/Icon.tsx

"use client";
/*
 * Documentation:
 * Icon — https://app.subframe.com/f023064a5ca0/library?component=Icon_e24ec5dc-9821-430d-8254-1d72a7d46218
 */

import React from "react";
import { FeatherCircle } from "@subframe/core";
import { FeatherCircleDashed } 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 = <FeatherCircle />,
    className,
    ...otherProps
  }: IconFeedbackIconProps,
  ref
) {
  return icon ? (
    <SubframeCore.IconWrapper
      className={SubframeUtils.twClassNames(
        "group/dc696813 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 IconRootProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?:
    | "primary"
    | "secondary"
    | "tertiary"
    | "destructive"
    | "neutral"
    | "success"
    | "warning"
    | "information";
  size?: "extra-small" | "small" | "medium" | "large" | "extra-large";
  icon?: React.ReactNode;
  className?: string;
}

const IconRoot = React.forwardRef<HTMLDivElement, IconRootProps>(
  function IconRoot(
    {
      variant = "primary",
      size = "medium",
      icon = <FeatherCircleDashed />,
      className,
      ...otherProps
    }: IconRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/e24ec5dc flex flex-col items-center justify-center rounded-sm",
          className
        )}
        ref={ref}
        {...otherProps}
      >
        {icon ? (
          <SubframeCore.IconWrapper
            className={SubframeUtils.twClassNames(
              "text-body-large-0 font-body-large-0 text-icon-neutral-primary",
              {
                "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-regular-0 font-body-small-regular-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 Icon = Object.assign(IconRoot, {
  IconFeedbackIcon,
});