BadgeGroup

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

export function AsLink() {
  return (
    <div className="flex flex-col items-start gap-4">
      <BadgeGroup badge="New" message="Payroll v2 is live" href="#payroll-v2" />
      <BadgeGroup
        type="trailing"
        tone="success"
        badge="Read more"
        message="All payroll runs completed"
        href="#payroll-runs"
      />
    </div>
  );
}

import { BadgeGroup } from "@nexera-ui/react";
import { LuSparkles } from "react-icons/lu";

export function ArrowSlot() {
  return (
    <div className="flex flex-col items-start gap-4">
      <BadgeGroup badge="New" message="Default arrow" />
      <BadgeGroup badge="New" message="No arrow" arrow={null} />
      <BadgeGroup badge="New" message="Another icon" arrow={<LuSparkles />} />
      <BadgeGroup type="trailing" badge="Read more" message="Arrow in the badge" arrow={null} />
    </div>
  );
}

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

export function StatusInWords() {
  return (
    <div className="flex flex-col items-start gap-3">
      <BadgeGroup
        tone="success"
        badge="Resolved"
        message="Payroll export is working again"
        arrow={null}
      />
      <BadgeGroup
        tone="warning"
        badge="Delayed"
        message="Bank transfers may take 2 days"
        arrow={null}
      />
      <BadgeGroup tone="danger" badge="Outage" message="Payroll export is failing" arrow={null} />
      <BadgeGroup tone="neutral" badge="Info" message="Maintenance on Sunday" arrow={null} />
    </div>
  );
}

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

export function LongMessage() {
  return (
    <div className="max-w-xs">
      <BadgeGroup
        badge="New"
        message="Payroll v2 is live for every company in your region, with automatic tax filing and instant payslips"
      />
    </div>
  );
}

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

export function RightToLeft() {
  return (
    <div dir="rtl" lang="ar" className="flex flex-col items-start gap-4">
      <BadgeGroup badge="جديد" message="الإصدار الثاني من الرواتب متاح الآن" href="#payroll" />
      <BadgeGroup
        type="trailing"
        tone="success"
        badge="اقرأ المزيد"
        message="الإصدار الثاني من الرواتب متاح الآن"
        href="#payroll"
      />
    </div>
  );
}