Empty State

import { Button, EmptyState, toast } from 'ferry-ui'
import { Plus, Receipt } from 'lucide-react'

export default function EmptyStateHero() {
  return (
    <EmptyState
      icon={<Receipt />}
      title="No invoices yet"
      description="The invoices that you send to your customers show here."
      actions={
        <Button variant="primary" icon={<Plus />} onClick={() => toast.success('Invoice created')}>
          New invoice
        </Button>
      }
    />
  )
}

import { EmptyState } from 'ferry-ui'
import { FileQuestion, FolderKanban, MessageSquare } from 'lucide-react'

export default function EmptyStateVariants() {
  return (
    <div className="grid gap-4 sm:grid-cols-3">
      <EmptyState
        variant="dashed"
        size="sm"
        icon={<FolderKanban />}
        title="No projects yet"
        description="The dashed variant."
      />
      <EmptyState
        variant="bordered"
        size="sm"
        icon={<FileQuestion />}
        title="Page not found"
        description="The bordered variant."
      />
      <EmptyState
        variant="plain"
        size="sm"
        icon={<MessageSquare />}
        title="No comments yet"
        description="The plain variant."
      />
    </div>
  )
}

import { EmptyState } from 'ferry-ui'
import { Users } from 'lucide-react'

export default function EmptyStateSizes() {
  return (
    <div className="grid items-start gap-4 sm:grid-cols-3">
      <EmptyState size="sm" icon={<Users />} title="No members yet" description="Small, 24px of padding." />
      <EmptyState size="md" icon={<Users />} title="No members yet" description="Medium, 40px of padding." />
      <EmptyState size="lg" icon={<Users />} title="No members yet" description="Large, 64px of padding." />
    </div>
  )
}

import * as React from 'react'
import { Button, EmptyState, SearchInput } from 'ferry-ui'
import { SearchX } from 'lucide-react'

const CUSTOMERS = ['Acme', 'Globex', 'Northwind Traders']

export default function EmptyStateNoResults() {
  const [query, setQuery] = React.useState('payroll')
  const matches = CUSTOMERS.filter((name) => name.toLowerCase().includes(query.trim().toLowerCase()))

  return (
    <div className="mx-auto flex w-full max-w-md flex-col gap-4">
      <SearchInput placeholder="Search customers" value={query} onValueChange={setQuery} className="w-full" />
      {matches.length === 0 ? (
        <EmptyState
          icon={<SearchX />}
          title={`No results for "${query}"`}
          description="Check the spelling or search for another name."
          actions={<Button onClick={() => setQuery('')}>Clear search</Button>}
        />
      ) : (
        <ul className="divide-y rounded-lg border bg-surface-100 text-sm text-foreground">
          {matches.map((name) => (
            <li key={name} className="px-4 py-2.5">
              {name}
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}

import { Card, CardContent, CardHeader, CardTitle, EmptyState } from 'ferry-ui'
import { History } from 'lucide-react'

export default function EmptyStateInCard() {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <CardTitle>Recent activity</CardTitle>
      </CardHeader>
      <CardContent>
        <EmptyState
          variant="plain"
          size="sm"
          icon={<History />}
          title="No activity yet"
          description="Edits, comments and invitations show here."
        />
      </CardContent>
    </Card>
  )
}

import { Button, EmptyState, toast } from 'ferry-ui'
import { FileQuestion } from 'lucide-react'

export default function EmptyStateFullPage() {
  return (
    <EmptyState
      variant="bordered"
      size="lg"
      icon={<FileQuestion />}
      title="Page not found"
      description="This page has a new address, or it does not exist."
      actions={
        <>
          <Button onClick={() => toast.info('Back to the last page')}>Go back</Button>
          <Button variant="primary" onClick={() => toast.info('Dashboard opened')}>
            Go to the dashboard
          </Button>
        </>
      }
    />
  )
}

import { Button, CodeBlock, EmptyState, toast } from 'ferry-ui'
import { KeyRound, Plus } from 'lucide-react'

export default function EmptyStateChildren() {
  return (
    <EmptyState
      icon={<KeyRound />}
      title="No API keys yet"
      description="Your server uses an API key to call the API."
      actions={
        <Button variant="primary" icon={<Plus />} onClick={() => toast.success('API key created')}>
          New API key
        </Button>
      }
    >
      <div className="mt-2 flex w-full max-w-sm flex-col gap-2 text-left">
        <p className="text-[13px] text-foreground-lighter">Or use the command line:</p>
        <CodeBlock prompt code="acme keys create" what="command" />
      </div>
    </EmptyState>
  )
}

import * as React from 'react'
import { ErrorState } from 'ferry-ui'

export default function ErrorStateRetry() {
  const [retrying, setRetrying] = React.useState(false)

  function retry() {
    setRetrying(true)
    window.setTimeout(() => setRetrying(false), 1500)
  }

  return (
    <ErrorState
      title="Could not load invoices"
      error={new Error('The request timed out after 30 seconds.')}
      onRetry={retry}
      retrying={retrying}
    />
  )
}

import { ErrorState } from 'ferry-ui'

export default function ErrorStateDescription() {
  return (
    <ErrorState
      title="You do not have access to billing"
      error={new Error('403 billing_admin_required')}
      description="Only a billing admin can see the invoices. Ask the owner of the workspace for this role."
    />
  )
}