SystemMessage

import { SystemMessage } from "@nexera-ui/react";
import { LuUserPlus, LuUserX } from "react-icons/lu";

export function InConversation() {
  return (
    <div role="log" aria-label="Conversation" className="flex max-w-xl flex-col gap-3">
      <p className="m-0 text-body-default text-primary">Welcome to the people team channel.</p>
      <SystemMessage icon={<LuUserPlus />} className="self-center">
        Hina Raza joined #people-ops
      </SystemMessage>
      <SystemMessage icon={<LuUserX />} className="self-center">
        Bilal Ahmed left #people-ops
      </SystemMessage>
      <SystemMessage className="self-center">Channel renamed to #people</SystemMessage>
    </div>
  );
}

import { SystemMessage } from "@nexera-ui/react";
import { LuUserPlus } from "react-icons/lu";

<div className="max-w-xs">
  <SystemMessage icon={<LuUserPlus />}>
    Hina Raza added Ayesha Khan, Bilal Ahmed and Sara Malik to #people-ops-and-employee-experience
  </SystemMessage>
</div>;

import { SystemMessage } from "@nexera-ui/react";
import { LuUserPlus } from "react-icons/lu";

<SystemMessage icon={<LuUserPlus />}>انضمت هناء رضا إلى القناة</SystemMessage>;