Spec sheet

TS

import { … } from "@fungi.computer/caps/blocks/spec-sheet";

Facts

TSX

import { SpecRuler, SpecFacts } from "@fungi.computer/caps/blocks/spec-sheet";

const facts = [
  { id: "yield", value: "1.4 kg", label: "Yield" },
  { id: "cycles", value: "3", label: "Cycles" },
  { id: "days", value: "10", label: "Days to fruit" },
];

export default function Facts() {
  return (
    <div>
      <SpecRuler label="01 · Lion's Mane" />
      <SpecFacts facts={facts} />
    </div>
  );
}

Frame

TSX

import { SpecFrame } from "@fungi.computer/caps/blocks/spec-sheet";

export default function Frame() {
  return (
    <SpecFrame caption="Fig. 1 — fruiting body">
      <div className="flex h-24 items-center justify-center text-4xl">🍄</div>
    </SpecFrame>
  );
}

Steps

TSX

import { SpecSteps } from "@fungi.computer/caps/blocks/spec-sheet";

const steps = [
  { id: "soak", title: "Soak", body: "Hydrate the substrate for 24 hours." },
  { id: "pack", title: "Pack", body: "Pack firmly into the grow bag." },
  { id: "wait", title: "Wait", body: "Keep warm and dark until colonized." },
];

export default function Steps() {
  return <SpecSteps steps={steps} />;
}

Diagram

TSX

import { SpecDiagram } from "@fungi.computer/caps/blocks/spec-sheet";

const markers = [
  { id: "cap", tag: "A", x: 50, y: 20, label: "Cap" },
  { id: "gill", tag: "B", x: 50, y: 45, label: "Gills" },
  { id: "stem", tag: "C", x: 50, y: 75, label: "Stem" },
];

export default function Diagram() {
  return (
    <SpecDiagram
      art={
        <div className="flex h-24 items-center justify-center text-4xl">🍄</div>
      }
      markers={markers}
    />
  );
}

Props

SpecRulerProps

Prop	Type	Description
label	ReactNode	A short section label, such as 01 · Plans.

• labelReactNode

  A short section label, such as 01 · Plans.

SpecFrameProps

Prop	Type	Description
children	ReactNode	Caller-owned media, such as an img with its own alt text.
caption?	ReactNode	A short printed caption under the frame.
surface?	"default" | "inverse"	inverse seats dark media, such as a terminal readout, in the frame.

• childrenReactNode

  Caller-owned media, such as an img with its own alt text.

• caption?ReactNode

  A short printed caption under the frame.

• surface?"default" | "inverse"

  inverse seats dark media, such as a terminal readout, in the frame.

SpecFactsProps

Prop	Type	Description
facts	readonly SpecFact[]

• factsreadonly SpecFact[]

SpecStepsProps

Prop	Type	Description
steps	readonly SpecStep[]

• stepsreadonly SpecStep[]

SpecFaqProps

Prop	Type	Description
items	readonly SpecFaqItem[]
defaultOpen?	readonly string[]	Ids of the items that start open.

• itemsreadonly SpecFaqItem[]
• defaultOpen?readonly string[]

  Ids of the items that start open.

SpecDiagramProps

Prop	Type	Description
art	ReactNode	Caller-owned art, such as an img with its own alt text.
markers	readonly SpecDiagramMarker[]

• artReactNode

  Caller-owned art, such as an img with its own alt text.

• markersreadonly SpecDiagramMarker[]

Full types: API reference.