Empty state

import { FileSearch, Inbox, PlugZap } from 'lucide-react'
import { Button, ButtonLink } from '@/components/ui/button'
import { EmptyState } from '@/components/ui/empty-state'
import { Panel } from '@/components/ui/card'
import { DemoStage } from './_kit'

export default function EmptyStateDemo() {
  return (
    <DemoStage>
      <EmptyState
        icon={<Inbox className="size-5" />}
        title="No deployments yet"
        description="Connect a repository and Foundry will build every push to your default branch."
        action={<Button size="sm">Connect repository</Button>}
        secondaryAction={
          <ButtonLink href="/docs/getting-started" size="sm" variant="ghost">
            Read the guide
          </ButtonLink>
        }
      />

      <EmptyState
        icon={<FileSearch className="size-5" />}
        title="No results for “observability”"
        description="Check the spelling, or browse the catalogue by category instead."
        action={
          <ButtonLink href="/components" size="sm" variant="outline">
            Browse components
          </ButtonLink>
        }
        size="sm"
      />

      <Panel title="Integrations" description="Bare appearance, for use inside an existing panel.">
        <EmptyState
          appearance="bare"
          size="sm"
          icon={<PlugZap className="size-5" />}
          title="Nothing connected"
          description="Integrations appear here once at least one is authorised."
        />
      </Panel>
    </DemoStage>
  )
}

import type { ReactNode } from 'react'
import { cn } from '@/lib/cn'

/**
 * EmptyState
 *
 * An empty state is a piece of product writing more than a piece of UI, so the
 * component enforces the three parts that make one useful: what is missing,
 * why it might be missing, and the single most likely next action.
 */
export interface EmptyStateProps {
  icon?: ReactNode
  title: string
  description?: string
  action?: ReactNode
  secondaryAction?: ReactNode
  /** `panel` draws a dashed enclosure; `bare` sits inside an existing panel. */
  appearance?: 'panel' | 'bare'
  size?: 'sm' | 'md' | 'lg'
  className?: string
}

export function EmptyState({
  icon,
  title,
  description,
  action,
  secondaryAction,
  appearance = 'panel',
  size = 'md',
  className,
}: EmptyStateProps) {
  const padding = { sm: 'py-8', md: 'py-12', lg: 'py-20' }[size]

  return (
    <div
      className={cn(
        'flex flex-col items-center px-6 text-center',
        padding,
        appearance === 'panel' &&
          'rounded-lg border border-dashed border-line-strong bg-surface-sunken/60',
        className,
      )}
    >
      {icon ? (
        <div className="mb-4 flex size-11 items-center justify-center rounded-full border border-line bg-surface text-ink-subtle">
          {icon}
        </div>
      ) : null}
      <p className="text-md font-semibold text-ink-strong text-balance">{title}</p>
      {description ? (
        <p className="mt-1.5 max-w-sm text-sm text-ink-muted text-pretty">{description}</p>
      ) : null}
      {(action || secondaryAction) && (
        <div className="mt-5 flex flex-wrap items-center justify-center gap-2">
          {action}
          {secondaryAction}
        </div>
      )}
    </div>
  )
}