Banner

import { Banner } from "@nexera-ui/react";

const tones = ["info", "warning", "danger", "brand"] as const;

export function Tones() {
  return (
    <div className="flex flex-col gap-4">
      {tones.map((tone) => (
        <Banner
          key={tone}
          message="Payroll v2 is rolling out this week."
          action={<a href="#payroll-v2">Learn more</a>}
          onDismiss={() => undefined}
          tone={tone}
          politeness="polite"
        />
      ))}
    </div>
  );
}

import { useState } from "react";
import { Banner, Button } from "@nexera-ui/react";

export function Dismissible() {
  const [visible, setVisible] = useState(true);
  return (
    <div className="flex flex-col gap-4">
      {visible ? (
        <Banner
          message="Payroll v2 is rolling out this week."
          action={<a href="#payroll-v2">Learn more</a>}
          onDismiss={() => {
            setVisible(false);
            document.getElementById("banner-page-title")?.focus();
          }}
        />
      ) : null}
      <div className="flex flex-col items-start gap-4 p-4">
        <h1 id="banner-page-title" tabIndex={-1} className="m-0 text-heading-h2 text-primary">
          Payroll
        </h1>
        <Button
          variant="secondary"
          onPress={() => {
            setVisible(true);
          }}
        >
          Show the banner again
        </Button>
      </div>
    </div>
  );
}

import { Banner } from "@nexera-ui/react";

<Banner
  message="Payroll v2 is rolling out to every team this week, starting with finance and people operations on Monday. Expect short interruptions while we migrate."
  action={<a href="#payroll-v2">Learn more</a>}
  onDismiss={() => undefined}
  tone="warning"
/>;

import { Banner, Button } from "@nexera-ui/react";

export function Sticky() {
  return (
    <div className="h-80 overflow-auto [scroll-padding-top:3rem]">
      <Banner
        message="Payroll v2 is rolling out this week."
        action={<a href="#payroll-v2">Learn more</a>}
        onDismiss={() => undefined}
        className="sticky top-0 z-sticky"
      />
      <div className="flex flex-col items-start gap-4 p-4">
        {Array.from({ length: 12 }, (_, index) => (
          <Button key={index} variant="secondary">
            Payslip {index + 1}
          </Button>
        ))}
      </div>
    </div>
  );
}

import { Banner } from "@nexera-ui/react";

<Banner
  message="يتم طرح الرواتب الإصدار 2 هذا الأسبوع."
  action={<a href="#payroll-v2">اعرف المزيد</a>}
  onDismiss={() => undefined}
  iconLabel="معلومة"
  dismissLabel="إغلاق"
/>;