Empty

import { Button } from './components/elyri/Button';
import { Empty } from './components/elyri/Empty';

export function Example() {
  return (
    <Empty title="No projects yet" action={<Button size="sm">Create project</Button>}>
      Projects you create will show up here.
    </Empty>
  );
}

import { Empty } from './components/elyri/Empty';

export function Example() {
  return (
    <div className="demo-ui-grid">
      <Empty size="sm" title="No documents" />
      <Empty size="sm" variant="search" title="No results" />
      <Empty size="sm" variant="inbox" title="Inbox zero" />
    </div>
  );
}

import { Empty } from './components/elyri/Empty';

export function Example() {
  return (
    <div className="demo-ui-row">
      <Empty size="sm" title="Small" />
      <Empty size="md" title="Medium" />
      <Empty size="lg" title="Large" />
    </div>
  );
}

import { Empty } from './components/elyri/Empty';

const checkIcon = (
  <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <circle cx="12" cy="12" r="9" />
    <path d="m8 12.5 2.5 2.5L16 9.5" />
  </svg>
);

export function Example() {
  return (
    <div className="demo-ui-row">
      <Empty image={checkIcon} title="All clear">
        Nothing left to review.
      </Empty>
      <Empty image={null} title="No activity">
        Recent changes will appear here.
      </Empty>
    </div>
  );
}