yaak-mountain-loop/src-web/components/core/Banner.tsx

import classNames from "classnames";
import type { ReactNode } from "react";

export interface BannerProps {
  children: ReactNode;
  className?: string;
  color?: "primary" | "secondary" | "success" | "notice" | "warning" | "danger" | "info";
}

export function Banner({ children, className, color }: BannerProps) {
  return (
    <div className="w-auto grid grid-rows-1 max-h-full flex-0">
      <div
        className={classNames(
          className,
          color && "bg-surface",
          `x-theme-banner--${color}`,
          "border border-border border-dashed",
          "px-4 py-2 rounded-lg select-auto cursor-auto",
          "overflow-auto text-text",
          "mb-auto", // Don't stretch all the way down if the parent is in grid or flexbox
        )}
      >
        {children}
      </div>
    </div>
  );
}