Action row

TS

import { … } from "@fungi.computer/caps/components/action-row";

Mushroom list

TSX

import { ActionRow } from "@fungi.computer/caps/components/action-row";

export default function MushroomList() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-1">
      <ActionRow
        icon={<span aria-hidden="true">🍄</span>}
        label="Chanterelle"
        description="Golden, ridged, smells like apricots"
        trailing={<span className="text-xs text-base-content">3 found</span>}
      />
      <ActionRow
        icon={<span aria-hidden="true">🍄</span>}
        label="Lion's mane"
        description="Shaggy white tufts on dead hardwood"
        trailing={<span className="text-xs text-base-content">1 found</span>}
      />
      <ActionRow
        icon={<span aria-hidden="true">☠️</span>}
        label="Death cap"
        description="Do not pick. Do not touch."
        variant="ghost-destructive"
        trailing={<span className="text-xs text-base-content">avoid</span>}
      />
    </div>
  );
}

Density and appearance

TSX

import { ActionRow } from "@fungi.computer/caps/components/action-row";

export default function DensityAndAppearance() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <ActionRow
        density="compact"
        icon={<span aria-hidden="true">🧺</span>}
        label="Compact row"
        description="Tighter padding for dense lists"
      />
      <ActionRow
        appearance="card"
        iconSize="lg"
        icon={<span aria-hidden="true">🎮</span>}
        label="Card appearance"
        description="Molds itself into a raised plastic card"
        trailing={<span className="text-xs text-base-content">open</span>}
      />
    </div>
  );
}

Selectable list

TSX

import { useState } from "react";
import { ActionRow } from "@fungi.computer/caps/components/action-row";

const spots = ["Oak hollow", "Mossy ridge", "Creek bend"];

export default function SelectableList() {
  const [picked, setPicked] = useState(spots[0]);
  return (
    <div className="flex w-full max-w-sm flex-col gap-1">
      {spots.map((spot) => (
        <ActionRow
          key={spot}
          icon={<span aria-hidden="true">📍</span>}
          label={spot}
          description={picked === spot ? "Today's spot" : undefined}
          trailing={picked === spot ? <span aria-hidden="true">✓</span> : null}
          onClick={() => {
            setPicked(spot);
          }}
        />
      ))}
    </div>
  );
}

Props

ActionRowProps

Prop	Type	Description
icon?	ReactNode
label	ReactNode
description?	ReactNode
trailing?	ReactNode
density?	"regular" | "compact"
iconSize?	"default" | "lg"	lg gives a character-sized mark (a sprite head) more room than an icon.
appearance?	"plain" | "card"	card molds the row into its own raised plastic card.

• icon?ReactNode
• labelReactNode
• description?ReactNode
• trailing?ReactNode
• density?"regular" | "compact"
• iconSize?"default" | "lg"

  lg gives a character-sized mark (a sprite head) more room than an icon.

• appearance?"plain" | "card"

  card molds the row into its own raised plastic card.

Full types: API reference.