Textarea

import { Label, Textarea } from "@smallest-inc/ui";

export default function TextareaDefault() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="agent-prompt">System prompt</Label>
      <Textarea id="agent-prompt" placeholder="You are a friendly receptionist for a dental clinic." />
    </div>
  );
}

import { Textarea } from "@smallest-inc/ui";

export default function TextareaSecondary() {
  return (
    <div className="w-full max-w-sm">
      <Textarea variant="secondary" aria-label="Call notes" placeholder="Caller asked to reschedule to Friday." />
    </div>
  );
}

import { Textarea } from "@smallest-inc/ui";

export default function TextareaHeight() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Textarea
        aria-label="Greeting"
        defaultValue="Hi, thanks for calling Northwind Dental. How can I help you today?"
      />
      <Textarea
        aria-label="Knowledge base"
        className="min-h-32"
        placeholder="Opening hours, pricing, and cancellation policy."
      />
    </div>
  );
}

import {
  ArrowUpIcon,
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupText,
  InputGroupTextarea,
} from "@smallest-inc/ui";

export default function TextareaFooter() {
  return (
    <div className="w-full max-w-sm">
      <InputGroup>
        <InputGroupTextarea aria-label="Message the agent" placeholder="Ask the agent to summarize today's calls" />
        <InputGroupAddon align="block-end">
          <InputGroupText>Markdown supported</InputGroupText>
          <InputGroupButton aria-label="Send message" className="ml-auto">
            <ArrowUpIcon />
          </InputGroupButton>
        </InputGroupAddon>
      </InputGroup>
    </div>
  );
}