Popover

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

<Popover
  body="3 people are on leave and 2 are working remotely. Sara Malik returns on Monday."
  defaultOpen
  variant="with-header"
  title="Who is off today"
>
  {<Button variant="secondary">Who is off</Button>}
</Popover>;

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

<Popover
  body="3 people are on leave and 2 are working remotely. Sara Malik returns on Monday."
  defaultOpen
  variant="with-actions"
  title="Approve 2 leave requests?"
  primaryAction={
    <Button size="sm" slot="close">
      Approve
    </Button>
  }
  secondaryAction={
    <Button size="sm" variant="ghost" slot="close">
      Later
    </Button>
  }
>
  {<Button variant="secondary">Who is off</Button>}
</Popover>;

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

const placements = ["top", "bottom", "left", "right"] as const;

const BODY = "3 people are on leave and 2 are working remotely. Sara Malik returns on Monday.";

export function Placements() {
  return (
    <div className="flex w-max flex-col">
      {placements.map((placement) => (
        <div key={placement} className="flex min-h-[16rem] w-[44rem] items-center justify-center">
          <Popover
            variant="with-header"
            title={`placement="${placement}"`}
            body={BODY}
            placement={placement}
            isOpen
          >
            <Button variant="secondary">{placement}</Button>
          </Popover>
        </div>
      ))}
    </div>
  );
}

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

const BODY = "3 people are on leave and 2 are working remotely. Sara Malik returns on Monday.";

<Popover
  body={`${BODY} ${BODY} Everyone else on the team is working as usual, and the next payroll run is on the 28th, so approving now leaves enough time to plan cover.`}
  defaultOpen
  variant="with-actions"
  title="Approve the leave requests of the whole payroll team for the last week of December?"
  primaryAction={
    <Button size="sm" slot="close">
      Approve all requests
    </Button>
  }
  secondaryAction={
    <Button size="sm" variant="ghost" slot="close">
      Review one by one
    </Button>
  }
>
  {<Button variant="secondary">Who is off</Button>}
</Popover>;

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

<Popover
  body="ثلاثة أشخاص في إجازة واثنان يعملان عن بُعد."
  defaultOpen
  variant="with-actions"
  title="من في إجازة اليوم"
  closeLabel="إغلاق"
  primaryAction={
    <Button size="sm" slot="close">
      موافقة
    </Button>
  }
  secondaryAction={
    <Button size="sm" variant="ghost" slot="close">
      لاحقًا
    </Button>
  }
>
  {<Button variant="secondary">من في إجازة</Button>}
</Popover>;