Fusion UI

Overview

A Banner shows a message at the top edge of the application, above all views, in different styles and with an optional icon. useBanner() shows and hides it; the other views move down to make room.

"use client";

import {Banner, Button, IconInformation, Link, useBanner} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const BannerExample = () => {
  const {showBanner, hideBanner} = useBanner();
  const [isBannerVisible, setIsBannerVisible] = useState(false);

  const toggleBanner = () => {
    if (isBannerVisible) {
      hideBanner();
    } else {
      showBanner(
        <Banner icon={<IconInformation />} bannerStyle="warn">
          New version available! See{" "}
          <Link
            linkStyle={"secondary"}
            link={{
              href: "/components/link",
              title: "Primary Link",
            }}>
            further documentation
          </Link>
          .
        </Banner>,
      );
    }
    setIsBannerVisible(!isBannerVisible);
  };

  return <Button onClick={toggleBanner}>{isBannerVisible ? "Hide Banner" : "Show Banner"}</Button>;
};

Styles

warn

"use client";

import {
  Banner,
  BannerStyle,
  Button,
  IconErrorWarning,
  IconAlert,
  Input,
  Select,
  useBanner,
} from "@brynlabs/fusion-ui";
import React, {JSX, useState} from "react";

export const BannerStylesExample = () => {
  const {showBanner, hideBanner} = useBanner();
  const [isBannerVisible, setIsBannerVisible] = useState(false);
  const [value, setValue] = useState("You found the banner!");
  const [styleValue, setStyleValue] = useState<BannerStyle>("warn");

  const iconMap: Record<BannerStyle, JSX.Element> = {
    critical: <IconErrorWarning />,
    warn: <IconAlert />,
  };

  const toggleBanner = (message: string, style: BannerStyle) => {
    if (isBannerVisible) {
      hideBanner();
    } else {
      showBanner(
        <Banner icon={iconMap[style]} bannerStyle={styleValue}>
          {value}
        </Banner>,
      );
    }
    setIsBannerVisible(!isBannerVisible);
  };

  return (
    <div style={{display: "flex", flexDirection: "column", gap: "20px"}}>
      <Input label={"Banner message"} value={value} onChange={v => setValue(v)}></Input>
      <div>
        <Select
          placeholder={"default"}
          value={styleValue}
          values={["warn", "critical"]}
          onChange={v => setStyleValue(v as BannerStyle)}></Select>
      </div>
      <div>
        <Button onClick={() => toggleBanner(value, styleValue)}>
          {isBannerVisible ? "Hide Banner" : `Open ${styleValue} snackbar`}
        </Button>
      </div>
    </div>
  );
};