Send action

TS

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

Hero

TSX

import { SendAction } from "@fungi.computer/caps/components/send-action";

export default function Hero() {
  return <SendAction aria-label="Send message" state="ready" />;
}

States

TSX

import { SendAction } from "@fungi.computer/caps/components/send-action";

export default function States() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <SendAction aria-label="Send message" state="empty" />
      <SendAction aria-label="Send message" state="ready" />
      <SendAction aria-label="Generate image" state="busy" />
    </div>
  );
}

Composer

TSX

import { useState } from "react";
import {
  SendAction,
  type SendActionState,
} from "@fungi.computer/caps/components/send-action";
import { Textarea } from "@fungi.computer/caps/components/textarea";

export default function Composer() {
  const [text, setText] = useState("");
  const [state, setState] = useState<SendActionState>("empty");
  const send = () => {
    setState("busy");
    window.setTimeout(() => {
      setText("");
      setState("empty");
    }, 1000);
  };
  return (
    <div className="flex w-full max-w-sm items-end gap-2">
      <Textarea
        onChange={(event) => {
          setText(event.target.value);
          setState(event.target.value ? "ready" : "empty");
        }}
        placeholder="Describe a mushroom to identify…"
        rows={1}
        value={text}
      />
      <SendAction
        aria-label="Send"
        onClick={send}
        onStop={() => {
          setState("ready");
        }}
        state={state}
      />
    </div>
  );
}

Props

SendActionProps

Prop	Type	Description
state	"empty" | "ready" | "busy"
aria-label	string	The accessible name while it sends, such as "Generate image".
onStop()?	() => void	Offered while busy: the arrow becomes a stop square that calls this.
stopLabel?	string	The accessible name of the stop action.
iconSize?	number	Glyph size in pixels.

• state"empty" | "ready" | "busy"
• aria-labelstring

  The accessible name while it sends, such as "Generate image".

• onStop()?() => void

  Offered while busy: the arrow becomes a stop square that calls this.

• stopLabel?string

  The accessible name of the stop action.

• iconSize?number

  Glyph size in pixels.

Full types: API reference.