Empty states

import { LuCircleCheck, LuSearchX, LuUpload, LuUserPlus, LuUsers } from "react-icons/lu";
import { Button, EmptyState } from "@nexera-ui/react";

/** Empty states: first use, no search results and all done, each with the next step. */
export default function EmptyStates() {
  return (
    <div className="@container bg-page px-4 py-8 @3xl:px-8">
      <div className="mx-auto grid max-w-6xl gap-6">
        <header className="grid gap-1">
          <h2 className="text-heading-h2 text-primary">Empty states</h2>
          <p className="text-body-default text-secondary">
            Say why a view is empty and what to do next.
          </p>
        </header>
        <div className="grid gap-4 @5xl:grid-cols-3">
          <section
            aria-label="People directory, first use"
            className="grid place-items-center rounded-xl border border-default bg-surface p-6"
          >
            <EmptyState
              size="md"
              headingLevel={3}
              icon={<LuUsers />}
              title="Add your first teammates"
              description="Invite people by email or import them from a spreadsheet. They get an invite to set up their Northwind account."
              primaryAction={
                <Button size="md" leadingIcon={<LuUserPlus />}>
                  Invite people
                </Button>
              }
              secondaryAction={
                <Button size="md" variant="secondary" leadingIcon={<LuUpload />}>
                  Import CSV
                </Button>
              }
            />
          </section>
          <section
            aria-label="People search, no results"
            className="grid place-items-center rounded-xl border border-default bg-surface p-6"
          >
            <EmptyState
              size="md"
              headingLevel={3}
              icon={<LuSearchX />}
              title="No one matches “sales Lisbon”"
              description="Check the spelling, or clear the Team and Location filters to search all 248 people."
              primaryAction={
                <Button size="md" variant="secondary">
                  Clear filters
                </Button>
              }
            />
          </section>
          <section
            aria-label="Approvals, all done"
            className="grid place-items-center rounded-xl border border-default bg-surface p-6"
          >
            <EmptyState
              size="md"
              headingLevel={3}
              icon={<LuCircleCheck />}
              title="You're all caught up"
              description="No leave or expense requests are waiting for you. We'll let you know when a new one arrives."
              primaryAction={
                <Button size="md" variant="ghost">
                  View approved requests
                </Button>
              }
            />
          </section>
        </div>
      </div>
    </div>
  );
}