Input group

"use client"

import * as React from "react"
import { AtSign } from "lucide-react"
import { Field } from "@/components/candor/ui/field"
import { Input } from "@/components/candor/ui/input"
import { Textarea } from "@/components/candor/ui/textarea"
import { InputGroup, InputGroupAddon, InputGroupCount } from "@/components/candor/ui/input-group"

// Addons that name something the field needs ("per month") are read with it; an icon is decoration. The count is
// announced only at 80% of the limit, at the limit and over it.
export default function Example() {
  const [reply, setReply] = React.useState("")
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field label="Budget">
        <InputGroup>
          <InputGroupAddon>$</InputGroupAddon>
          <Input inputMode="decimal" />
          <InputGroupAddon align="end" describes>
            per month
          </InputGroupAddon>
        </InputGroup>
      </Field>
      <Field label="Handle">
        <InputGroup>
          <InputGroupAddon>
            <AtSign />
          </InputGroupAddon>
          <Input autoComplete="username" />
        </InputGroup>
      </Field>
      <Field label="Reply to the customer">
        <InputGroup className="items-end">
          <Textarea value={reply} onChange={(e) => setReply(e.target.value)} />
          <InputGroupCount value={reply} max={280} className="pb-2" />
        </InputGroup>
      </Field>
    </div>
  )
}