Resource select

TS

import { … } from "@fungi.computer/caps/blocks/resource-select";

Hero

TSX

import { ResourceSelect } from "@fungi.computer/caps/blocks/resource-select";
import { useState } from "react";

const options = [
  { id: "lions-mane", label: "Lion's Mane" },
  { id: "oyster", label: "Oyster" },
  { id: "chanterelle", label: "Chanterelle" },
];

export default function Hero() {
  const [value, setValue] = useState<string | undefined>("oyster");
  return (
    <ResourceSelect
      options={options}
      value={value}
      onSelect={(option) => {
        setValue(option.id);
      }}
      placeholder="Choose a species"
    />
  );
}

Disabled option

TSX

import { ResourceSelect } from "@fungi.computer/caps/blocks/resource-select";

const options = [
  { id: "lions-mane", label: "Lion's Mane" },
  { id: "reishi", label: "Reishi", disabled: true },
  { id: "shiitake", label: "Shiitake" },
];

export default function DisabledOption() {
  return (
    <ResourceSelect
      options={options}
      onSelect={() => {
        /* This specimen has no host action. */
      }}
      placeholder="Out of season?"
    />
  );
}

Props

ResourceSelectProps

Prop	Type	Description
option	ResourceOption

• optionResourceOption

Full types: API reference.