Split codebase (#455)

apps/yaak-client/components/core/DismissibleBanner.tsx

@@ -0,0 +1,57 @@
+import type { Color } from "@yaakapp-internal/plugins";
+import type { BannerProps } from "@yaakapp-internal/ui";
+import { Banner, HStack } from "@yaakapp-internal/ui";
+import classNames from "classnames";
+import { useKeyValue } from "../../hooks/useKeyValue";
+import { Button } from "./Button";
+
+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>
+  );
+}