Dashboard/ui/components/Alert/Alert.tsx

"use client";
/*
 * Documentation:
 * Alert — https://app.subframe.com/f023064a5ca0/library?component=Alert_3a65613d-d546-467c-80f4-aaba6a7edcd5
 * Icon Button — https://app.subframe.com/f023064a5ca0/library?component=Icon+Button_af9405b1-8c54-4e01-9786-5aad308224f6
 */

import React from "react";
import { FeatherAlertCircle } from "@subframe/core";
import { FeatherAlertTriangle } from "@subframe/core";
import { FeatherCheckCircle } from "@subframe/core";
import { FeatherInbox } from "@subframe/core";
import { FeatherInfo } from "@subframe/core";
import { FeatherX } from "@subframe/core";
import * as SubframeUtils from "../../utils";
import { IconButton } from "../IconButton";

export interface AlertRootProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
  variant?: "information" | "success" | "warning" | "error" | "neutral";
  notDismissible?: boolean;
  title?: React.ReactNode;
  description?: React.ReactNode;
  textSize?: "small" | "medium";
  className?: string;
}

const AlertRoot = React.forwardRef<HTMLDivElement, AlertRootProps>(
  function AlertRoot(
    {
      variant = "information",
      notDismissible = false,
      title,
      description,
      textSize = "medium",
      className,
      ...otherProps
    }: AlertRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/3a65613d flex w-full flex-col items-start gap-2 rounded-md border border-solid border-border-information-subtle bg-surface-feedback-subtle-information px-4 py-5 relative",
          {
            "px-3 py-3.5": textSize === "small",
            "border border-solid border-border-default bg-surface-feedback-subtle-neutral":
              variant === "neutral",
            "border border-solid border-border-negative-subtle bg-surface-feedback-subtle-negative":
              variant === "error",
            "border border-solid border-border-warning-subtle bg-surface-feedback-subtle-warning":
              variant === "warning",
            "border border-solid border-border-positive-subtle bg-surface-feedback-subtle-positive":
              variant === "success",
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <div
          className={SubframeUtils.twClassNames(
            "flex w-full items-start gap-3",
            { "gap-2.5": textSize === "small" }
          )}
        >
          <FeatherInfo
            className={SubframeUtils.twClassNames(
              "text-heading-0 font-heading-0 text-icon-feedback-information",
              {
                "text-body-large font-body-large": textSize === "small",
                hidden:
                  variant === "neutral" ||
                  variant === "error" ||
                  variant === "warning" ||
                  variant === "success",
              }
            )}
          />
          <FeatherCheckCircle
            className={SubframeUtils.twClassNames(
              "hidden text-heading-0 font-heading-0 text-icon-feedback-positive",
              { "inline-flex": variant === "success" }
            )}
          />
          <FeatherAlertTriangle
            className={SubframeUtils.twClassNames(
              "hidden text-heading-0 font-heading-0 text-icon-feedback-warning",
              { "inline-flex": variant === "warning" }
            )}
          />
          <FeatherAlertCircle
            className={SubframeUtils.twClassNames(
              "hidden text-heading-0 font-heading-0 text-icon-feedback-negative",
              { "inline-flex": variant === "error" }
            )}
          />
          <FeatherInbox
            className={SubframeUtils.twClassNames(
              "hidden text-heading-0 font-heading-0 text-icon-neutral-secondary",
              { "inline-flex": variant === "neutral" }
            )}
          />
          <div className="flex grow shrink-0 basis-0 flex-col items-start gap-2">
            {title ? (
              <span
                className={SubframeUtils.twClassNames(
                  "w-full whitespace-pre-wrap text-body-default-medium-0 font-body-default-medium-0 text-text-feedback-information",
                  {
                    "text-body-small-medium-0 font-body-small-medium-0":
                      textSize === "small",
                    "text-text-neutral-primary": variant === "neutral",
                    "text-text-feedback-negative": variant === "error",
                    "text-text-feedback-warning": variant === "warning",
                    "text-text-feedback-positive": variant === "success",
                  }
                )}
              >
                {title}
              </span>
            ) : null}
            {description ? (
              <span
                className={SubframeUtils.twClassNames(
                  "w-full whitespace-pre-wrap text-body-default-regular-150 font-body-default-regular-150 text-text-neutral-secondary",
                  {
                    "text-body-small-regular-150 font-body-small-regular-150":
                      textSize === "small",
                  }
                )}
              >
                {description}
              </span>
            ) : null}
          </div>
          <div
            className={SubframeUtils.twClassNames(
              "flex items-center justify-end gap-1 px-1 py-1",
              { hidden: notDismissible }
            )}
          >
            <IconButton variant="ghost" square={true} icon={<FeatherX />} />
          </div>
        </div>
        <div className="hidden items-start justify-center absolute top-3 right-3">
          <FeatherX className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-secondary" />
        </div>
      </div>
    );
  }
);

export const Alert = AlertRoot;