HiveGrid-Wireframes/hivegrid-cloud/apps/web/app/ui/components/Alert/Alert.tsx

"use client";
/*
 * Documentation:
 * Alert — https://app.subframe.com/f023064a5ca0/library?component=Alert_3a65613d-d546-467c-80f4-aaba6a7edcd5
 */

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";

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

const AlertRoot = React.forwardRef<HTMLDivElement, AlertRootProps>(
  function AlertRoot(
    {
      variant = "information",
      notDismissible = false,
      title,
      description,
      actions,
      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",
          {
            "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="flex w-full items-start gap-3">
          <FeatherInfo
            className={SubframeUtils.twClassNames(
              "text-heading-0 font-heading-0 text-icon-feedback-information",
              {
                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-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="w-full whitespace-pre-wrap text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary">
                {description}
              </span>
            ) : null}
          </div>
          {actions ? (
            <div
              className={SubframeUtils.twClassNames(
                "flex items-center justify-end gap-1 px-1 py-1",
                { hidden: notDismissible }
              )}
            >
              {actions}
            </div>
          ) : null}
        </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;