yaak/src-web/components/core/DismissibleBanner.tsx

import type { Color } from "@yaakapp-internal/plugins";
import classNames from "classnames";
import { useKeyValue } from "../../hooks/useKeyValue";
import type { BannerProps } from "./Banner";
import { Banner } from "./Banner";
import { Button } from "./Button";
import { HStack } from "./Stacks";

export function DismissibleBanner({
  children,
  className,
  id,
  actions,
  ...props
}: BannerProps & {
  id: string;
  actions?: { label: string; onClick: () => void; color?: Color }[];
}) {
  const { set: setDismissed, value: dismissed } = useKeyValue<boolean>({
    namespace: "global",
    key: ["dismiss-banner", id],
    fallback: false,
  });

  if (dismissed) return null;

  return (
    <Banner
      className={classNames(className, "relative grid grid-cols-[1fr_auto] gap-3")}
      {...props}
    >
      {children}
      <HStack space={1.5}>
        {actions?.map((a) => (
          <Button
            key={a.label}
            variant="border"
            color={a.color ?? props.color}
            size="xs"
            onClick={a.onClick}
            title={a.label}
          >
            {a.label}
          </Button>
        ))}
        <Button
          variant="border"
          color={props.color}
          size="xs"
          onClick={() => setDismissed((d) => !d)}
          title="Dismiss message"
        >
          Dismiss
        </Button>
      </HStack>
    </Banner>
  );
}