Text Area

import { Description, TextArea } from "@/components/ui/heroui-text-area"
import React from "react"

export default function Demo() {
  const [value, setValue] = React.useState("")

  return (
    <div className="flex w-full items-center justify-center">
      <div className="flex w-96 flex-col gap-2">
        <TextArea
          aria-describedby="textarea-controlled-description"
          aria-label="Announcement"
          placeholder="Compose an announcement..."
          value={value}
          onChange={(event) => setValue(event.target.value)}
        />
        <Description id="textarea-controlled-description">
          Characters: {value.length} / 280
        </Description>
      </div>
    </div>
  )
}