Empty state

import { Button } from "@bosunkit/components/button";
import { EmptyState } from "@bosunkit/components/empty-state";
import { ClipboardList } from "lucide-react";
import type { ReactElement } from "react";

export const description: string =
  "A checklist page with no runs yet: the mark, what is empty, what to do, and the button that does it.";

export default function Showcase(): ReactElement {
  return (
    <EmptyState
      icon={ClipboardList}
      size="lg"
      headingLevel={2}
      title="No checklist runs yet"
      description="Start one from a template, such as Leaving harbour or Night passage."
      actions={
        <>
          <Button variant="primary">Start a run</Button>
          <Button>See the templates</Button>
        </>
      }
    />
  );
}

import { Button } from "@bosunkit/components/button";
import { EmptyState } from "@bosunkit/components/empty-state";
import type { ReactElement } from "react";

export const description: string =
  "A crew search that matched nobody: the state is read out as it replaces the results, and offers to clear the search.";

export default function NoResults(): ReactElement {
  return (
    <EmptyState
      kind="no-results"
      title="No crew member matches “Ana”"
      description="Check the spelling, or search by nickname or role."
      actions={<Button>Clear the search</Button>}
    />
  );
}

import { EmptyState } from "@bosunkit/components/empty-state";
import type { ReactElement } from "react";

export const description: string =
  "A tide panel where no tide tables cover the water: it says so, and what the depth shown is based on.";

export default function Unavailable(): ReactElement {
  return (
    <EmptyState
      kind="unavailable"
      title="No tide prediction for this position"
      description="The tide tables don't cover these waters, so the depth shown is the charted depth only."
    />
  );
}

import { EmptyState } from "@bosunkit/components/empty-state";
import type { ReactElement } from "react";

export const description: string = "The maintenance list with every task signed off: nothing left to do, in the success green.";

export default function Done(): ReactElement {
  return (
    <EmptyState
      kind="done"
      title="Every task is signed off"
      description="The next service, the engine's 250-hour, falls due in 38 engine hours."
    />
  );
}

import { DataTable, type Column } from "@bosunkit/components/data-table";
import { EmptyState } from "@bosunkit/components/empty-state";
import type { ReactElement } from "react";

export const description: string = "A voyage table with no rows: the small state takes the table's empty content.";

const COLUMNS: Column[] = [
  { key: "name", label: "Voyage" },
  { key: "from", label: "From" },
  { key: "to", label: "To" },
];

export default function InATable(): ReactElement {
  return (
    <DataTable
      columns={COLUMNS}
      rows={[]}
      empty={<EmptyState size="sm" title="No voyages yet" description="A voyage starts when the vessel leaves its berth." />}
    />
  );
}

import { EmptyState } from "@bosunkit/components/empty-state";
import type { ReactElement } from "react";

export const description: string = "The three sizes: a list's cell, a panel, and a page with nothing else in it.";

export default function Sizes(): ReactElement {
  return (
    <div style={{ display: "grid", gap: "var(--space-md)" }}>
      <EmptyState size="sm" align="start" title="No attachments" />
      <EmptyState size="md" title="No guests aboard" description="A guest is added from the crew page." />
      <EmptyState size="lg" title="No passages planned" description="Plan one from the chart." />
    </div>
  );
}