Empty state

TS

import { … } from "@fungi.computer/caps/blocks/empty-state";

Panel

TSX

import { EmptyState } from "@fungi.computer/caps/blocks/empty-state";

export default function Panel() {
  return (
    <EmptyState
      variant="panel"
      title="No spore prints yet"
      description="Capture one from a fresh cap to start your library."
      suggestions={[
        {
          label: "Capture a print",
          onSelect: () => {
            /* This specimen has no host action. */
          },
        },
        {
          label: "Import from camera",
          onSelect: () => {
            /* This specimen has no host action. */
          },
        },
      ]}
    />
  );
}

Speech

TSX

import { EmptyState } from "@fungi.computer/caps/blocks/empty-state";

export default function Speech() {
  return (
    <EmptyState
      variant="speech"
      visual={<span className="text-3xl">🍄</span>}
      title="Nothing foraged today"
      description="Spora says: check the north trail after rain."
    />
  );
}

Quiet and hint

TSX

import { EmptyState } from "@fungi.computer/caps/blocks/empty-state";

export default function QuietAndHint() {
  return (
    <div className="flex flex-col gap-md">
      <section>
        <h3 className="caps-section-heading">Dried batches</h3>
        <EmptyState
          variant="quiet"
          headingLevel={4}
          title="None drying"
          description="Start a batch to see it here."
        />
      </section>
      <EmptyState
        variant="hint"
        title="Try sorting by weight"
        description="Most foragers log weight right after picking."
      />
    </div>
  );
}

Thinking

TSX

import { EmptyState } from "@fungi.computer/caps/blocks/empty-state";
import { Button } from "@fungi.computer/caps/components/button";
import { useState } from "react";

export default function Thinking() {
  const [thinking, setThinking] = useState(false);
  return (
    <div className="flex flex-col gap-sm">
      <EmptyState
        variant="speech"
        visual={<span className="text-3xl">🍄</span>}
        thinking={thinking}
        title={thinking ? "Spora is thinking…" : "Ask Spora anything"}
        description={
          thinking ? "Checking the field notes." : "Try asking about a species."
        }
      />
      <Button
        size="sm"
        variant="outline"
        onClick={() => {
          setThinking((value) => !value);
        }}
      >
        Toggle thinking
      </Button>
    </div>
  );
}

Props

EmptyStateProps

Prop	Type	Description
actions?	ReactNode
description	ReactNode
suggestions?	readonly EmptyStateSuggestion[]	Chips that offer a starting point, such as a prompt to try.
thinking?	boolean	The host is working on something, such as creating what this state invites.
title	ReactNode
headingLevel?	2 | 3 | 4	Heading level for the title; use one below the heading it sits under.
visual?	ReactNode	Static art.
renderVisual()?	(state) => ReactNode	Render a visual from the current speaking and thinking state.
variant?	"plain" | "panel" | "speech" | "hint" | "quiet"

• actions?ReactNode
• descriptionReactNode
• suggestions?readonly EmptyStateSuggestion[]

  Chips that offer a starting point, such as a prompt to try.

• thinking?boolean

  The host is working on something, such as creating what this state invites.

• titleReactNode
• headingLevel?2 | 3 | 4

  Heading level for the title; use one below the heading it sits under.

• visual?ReactNode

  Static art.

• renderVisual()?(state) => ReactNode

  Render a visual from the current speaking and thinking state.

• variant?"plain" | "panel" | "speech" | "hint" | "quiet"

Full types: API reference.