Field guide

TS

import { … } from "@fungi.computer/caps/components/field-guide";

Keycap and status

TSX

import { Keycap } from "@fungi.computer/caps/components/field-guide";
import { Status } from "@fungi.computer/caps/components/status";

export default function KeycapAndStatus() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <p>
        Press <Keycap>⌘</Keycap> <Keycap>K</Keycap> to jump to a log.
      </p>
      <Status tone="info" motion="bounce" label="Spawning" />
    </div>
  );
}

Cartridge label

TSX

import { CartridgeLabel } from "@fungi.computer/caps/components/field-guide";

export default function Cartridge() {
  return (
    <CartridgeLabel
      title="Mycelium Run"
      subtitle="Field Guide Edition"
      mark="🍄"
    />
  );
}

Specimen label

TSX

import { SpecimenLabel } from "@fungi.computer/caps/components/field-guide";

export default function Specimen() {
  return (
    <SpecimenLabel
      plate="14"
      detail="gill spacing"
      kind="Pleurotus ostreatus"
      number="No. 41"
      title="Oyster mushroom"
      summary="Gills run down the stem; spore print is lilac-grey."
      sketch
    />
  );
}

Props

KeycapProps

Prop	Type	Description
children	ReactNode

• childrenReactNode

CartridgeLabelProps

Prop	Type	Description
title	string
subtitle?	string
mark?	ReactNode

• titlestring
• subtitle?string
• mark?ReactNode

SpecimenLabelProps

Prop	Type	Description
plate	string
detail	string
kind	string
number	string
title	ReactNode
summary?	ReactNode
sketch?	boolean	Mark the plate number for a pencil circle and the detail for a pencil underline. The ruled CSS marks remain until enhance/sketch draws them.

• platestring
• detailstring
• kindstring
• numberstring
• titleReactNode
• summary?ReactNode
• sketch?boolean

  Mark the plate number for a pencil circle and the detail for a pencil underline. The ruled CSS marks remain until enhance/sketch draws them.

Full types: API reference.