Empty state

import { EmptyState } from '@raystack/apsara';
import { InboxIcon } from '@heroicons/react/24/outline';

function NoMessages() {
  return (
    <EmptyState
      icon={<InboxIcon />}
      heading="No messages"
      subHeading="You don't have any messages yet"
    />
  );
}

import { EmptyState } from '@raystack/apsara';
import { Button } from '@raystack/apsara';
import { PlusIcon } from '@heroicons/react/24/outline';

function NoProjects() {
  return (
    <EmptyState
      icon={<PlusIcon />}
      heading="No projects"
      subHeading="Get started by creating your first project"
      primaryAction={
        <Button onClick={() => console.log('Create project')}>
          Create Project
        </Button>
      }
    />
  );
}

import { EmptyState } from '@raystack/apsara';
import { Button } from '@raystack/apsara';
import { FolderIcon } from '@heroicons/react/24/outline';

function NoFiles() {
  return (
    <EmptyState
      icon={<FolderIcon />}
      heading="No files"
      subHeading="Upload files or import from another source"
      primaryAction={
        <Button variant="filled">Upload Files</Button>
      }
      secondaryAction={
        <Button variant="outline">Import Files</Button>
      }
    />
  );
}

import { EmptyState } from '@raystack/apsara';
import { Button } from '@raystack/apsara';
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

function NoResults() {
  return (
    <EmptyState
      variant="empty1"
      icon={<MagnifyingGlassIcon />}
      heading="No results found"
      subHeading="Try adjusting your search or filter criteria"
      primaryAction={<Button>Clear Filters</Button>}
    />
  );
}

import { EmptyState } from '@raystack/apsara';
import { Button } from '@raystack/apsara';
import { DocumentIcon } from '@heroicons/react/24/outline';

function NoDocuments() {
  return (
    <EmptyState
      variant="empty2"
      icon={<DocumentIcon />}
      heading="No documents"
      subHeading="Start by creating your first document or importing existing ones"
      primaryAction={<Button variant="filled">Create Document</Button>}
      secondaryAction={<Button variant="outline">Import</Button>}
    />
  );
}

import { EmptyState } from '@raystack/apsara';
import { InboxIcon } from '@heroicons/react/24/outline';

function CustomEmptyState() {
  return (
    <EmptyState
      icon={<InboxIcon />}
      heading="Custom styled empty state"
      subHeading="All elements can be customized"
      classNames={{
        container: 'custom-container',
        iconContainer: 'custom-icon-container',
        icon: 'custom-icon',
        heading: 'custom-heading',
        subHeading: 'custom-subheading'
      }}
    />
  );
}

import { EmptyState } from '@raystack/apsara';
import { Button } from '@raystack/apsara';
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

function SearchEmpty({ query }: { query: string }) {
  return (
    <EmptyState
      icon={<MagnifyingGlassIcon />}
      heading={`No results for "${query}"`}
      subHeading="Try different keywords or check your spelling"
      primaryAction={<Button onClick={() => console.log('Clear search')}>Clear Search</Button>}
    />
  );
}

import { EmptyState } from '@raystack/apsara';
import { Button } from '@raystack/apsara';
import { UsersIcon } from '@heroicons/react/24/outline';

function NoTeamMembers() {
  return (
    <EmptyState
      icon={<UsersIcon />}
      heading="No team members"
      subHeading="Invite people to collaborate on your projects"
      primaryAction={<Button>Invite Team Members</Button>}
    />
  );
}

import { EmptyState } from '@raystack/apsara';
import { Button } from '@raystack/apsara';
import { ExclamationCircleIcon } from '@heroicons/react/24/outline';

function ErrorState() {
  return (
    <EmptyState
      icon={<ExclamationCircleIcon />}
      heading="Something went wrong"
      subHeading="We couldn't load your data. Please try again."
      primaryAction={<Button onClick={() => window.location.reload()}>Retry</Button>}
    />
  );
}