Text Area

'use client'
import { useState } from 'react'

export default function TextAreaCharCount() {
  const [text, setText] = useState('')

  const maxChars = 200
  const charCount = text.length

  return (
    <div className="flex flex-col space-y-2 w-full max-w-md">
      <label className="font-medium text-[#121212] dark:text-[#f1f1f1]">Your text</label>

      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        className="bg-white border border-[#e8e8e8] dark:border-[#4c4c4c] dark:bg-[#2a2a2a] rounded-xl p-3 w-full resize-none focus:outline-none focus:ring-0"
        rows={5}
        maxLength={maxChars}>
      </textarea>

      <div className="flex items-center justify-end">
        <span className="text-sm text-[#121212] dark:text-[#f1f1f1]">
          {charCount}/{maxChars} characters
        </span>
      </div>
    </div>
  )
}