EmptyState

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

function Illustration({ height }: { height?: number }) {
  return (
    <svg viewBox="0 0 160 120" data-expect-height={height}>
      <rect x="16" y="20" width="128" height="88" rx="12" className="fill-sunken" />
      <rect x="36" y="44" width="56" height="8" rx="4" className="fill-nav-active-bg" />
      <rect x="36" y="60" width="88" height="8" rx="4" className="fill-nav-active-bg" />
      <circle cx="120" cy="28" r="16" className="fill-brand-subtle" />
    </svg>
  );
}

<EmptyState
  icon={<LuUsers />}
  title="Nothing scheduled"
  description="Shifts you publish appear here."
  primaryAction={<Button size="md">Create shift</Button>}
  variant="illustration"
  illustration={<Illustration />}
  size="md"
/>;

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

<EmptyState
  icon={<LuUsers />}
  title="No employees yet"
  description="Add your team one by one or import everyone from a spreadsheet."
  primaryAction={<Button size="sm">Add employee</Button>}
  secondaryAction={
    <Button size="sm" variant="secondary">
      Import CSV
    </Button>
  }
/>;

import { Button, EmptyState } from "@nexera-ui/react";
import { LuSearch } from "react-icons/lu";

<EmptyState
  icon={<LuSearch />}
  title="No employees match the filters you selected for this department and location"
  description="Try removing a filter, checking the spelling, or searching for a different name, email address or employee number."
  primaryAction={<Button size="sm">Add employee</Button>}
  size="md"
/>;

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

<EmptyState
  icon={<LuUsers />}
  title="لا يوجد موظفون بعد"
  description="أضف فريقك واحدًا تلو الآخر أو استورد الجميع من جدول بيانات."
  primaryAction={<Button size="sm">إضافة موظف</Button>}
  secondaryAction={
    <Button size="sm" variant="secondary">
      استيراد CSV
    </Button>
  }
/>;