Dashboard/ui/components/BannerAlert/BannerAlert.tsx

"use client";
/*
 * Documentation:
 * Banner Alert — https://app.subframe.com/f023064a5ca0/library?component=Banner+Alert_a3e8dcff-3c57-42da-880f-432bb8ce4100
 * Link Button — https://app.subframe.com/f023064a5ca0/library?component=Link+Button_a4ee726a-774c-4091-8c49-55b659356024
 */

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

export interface BannerAlertRootProps
  extends React.HTMLAttributes<HTMLDivElement> {
  dismissing?: boolean;
  type?: "information" | "success" | "warning" | "error";
  fillContainer?: boolean;
  hideAction?: boolean;
  dismissible?: boolean;
  children?: React.ReactNode;
  actionLabel?: React.ReactNode;
  className?: string;
}

const BannerAlertRoot = React.forwardRef<HTMLDivElement, BannerAlertRootProps>(
  function BannerAlertRoot(
    {
      dismissing = false,
      type = "information",
      fillContainer = false,
      hideAction = false,
      dismissible = false,
      children,
      actionLabel,
      className,
      ...otherProps
    }: BannerAlertRootProps,
    ref
  ) {
    return (
      <div
        className={SubframeUtils.twClassNames(
          "group/a3e8dcff flex w-256 items-center gap-2 border-b border-solid border-border-information-solid bg-surface-feedback-subtle-information px-4 py-3",
          {
            "w-full": fillContainer,
            "border-b border-x-0 border-t-0 border-solid border-border-negative-solid bg-surface-feedback-subtle-negative":
              type === "error",
            "border-b border-x-0 border-t-0 border-solid border-border-warning-solid bg-surface-feedback-subtle-warning":
              type === "warning",
            "border-b border-x-0 border-t-0 border-solid border-border-positive-solid bg-surface-feedback-subtle-positive":
              type === "success",
            hidden: dismissing,
          },
          className
        )}
        ref={ref}
        {...otherProps}
      >
        <FeatherInfo
          className={SubframeUtils.twClassNames(
            "text-body-large-0 font-body-large-0 text-icon-feedback-information",
            {
              hidden:
                type === "error" || type === "warning" || type === "success",
            }
          )}
        />
        <FeatherCheckCircle
          className={SubframeUtils.twClassNames(
            "hidden text-body-large-0 font-body-large-0 text-icon-feedback-positive",
            { "inline-flex": type === "success" }
          )}
        />
        <FeatherAlertTriangle
          className={SubframeUtils.twClassNames(
            "hidden text-body-large-0 font-body-large-0 text-icon-feedback-warning",
            { "inline-flex": type === "warning" }
          )}
        />
        <FeatherAlertCircle
          className={SubframeUtils.twClassNames(
            "hidden text-body-large-0 font-body-large-0 text-icon-feedback-negative",
            { "inline-flex": type === "error" }
          )}
        />
        {children ? (
          <span
            className={SubframeUtils.twClassNames(
              "grow shrink-0 basis-0 whitespace-pre-wrap text-body-default-regular-0 font-body-default-regular-0 text-text-feedback-information",
              {
                "text-text-feedback-negative": type === "error",
                "text-text-feedback-warning": type === "warning",
                "text-text-feedback-positive": type === "success",
              }
            )}
          >
            {children}
          </span>
        ) : null}
        <LinkButton iconRight={null} underline={true}>
          Aktion
        </LinkButton>
        <div
          className={SubframeUtils.twClassNames(
            "hidden items-center justify-center rounded-md px-1 py-1 cursor-pointer hover:bg-black-100",
            { "inline-flex": dismissible }
          )}
        >
          <FeatherX
            className={SubframeUtils.twClassNames(
              "text-body-large-0 font-body-large-0 text-icon-feedback-information",
              {
                "text-icon-feedback-negative": type === "error",
                "text-icon-feedback-warning": type === "warning",
                "text-icon-feedback-positive": type === "success",
              }
            )}
          />
        </div>
      </div>
    );
  }
);

export const BannerAlert = BannerAlertRoot;