Input Fields

export default function InputField() {
  return (
    <input
      placeholder="Type here"
      type="text"
      className="border-2 border-[#e8e8e8] dark:border-[#4c4c4c] bg-white dark:bg-[#2a2a2a] dark:text-[#f1f1f1] w-56 focus:outline-none p-2 rounded-lg text-sm"
    />
  )
}

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

export default function InputFieldValidation() {
  const [value, setValue] = useState('')
  const [hasError, setHasError] = useState(false)
  const [isCorrect, setIsCorrect] = useState(false)

  const handleChange = (e) => {
    const newValue = e.target.value
    setValue(newValue)
    setHasError(newValue.trim() === '')
    setIsCorrect(newValue.length >= 2)
  }

  return (
    <div className="flex flex-col">
      <label className="text-sm pb-2 font-semibold">Name</label>
      <input
        placeholder="Type your name here"
        type="text"
        value={value}
        onChange={handleChange}
        className={`border-2 p-2 rounded-lg text-sm w-56 focus:outline-none border-[#e8e8e8] dark:border-[#4c4c4c] text-[#121212] dark:text-[#f1f1f1] ${
          hasError ? 'border-[#ffcdd2] dark:border-[#e57373]' : isCorrect ? 'border-[#c8e6c9]' : ' border-border'}`}/>

      {hasError && <p className="text-[#D32F2F] text-xs pt-2 pl-[1px]">This field is required</p>}
    </div>
  )
}

'use client'
import { useState } from 'react'
import { CircleCheck, CircleX } from 'lucide-react'

export default function InputFieldValidationIcons() {
  const [value, setValue] = useState('')
  const [hasError, setHasError] = useState(false)
  const [isCorrect, setIsCorrect] = useState(false)

  const handleChange = (e) => {
    const newValue = e.target.value
    setValue(newValue)
    setHasError(newValue.trim() === '')
    setIsCorrect(newValue.length >= 2)
  }

  return (
    <div className="flex flex-col">
      <label className="text-sm pb-2 font-semibold">Name</label>
      <div className="flex flex-row items-center">
        <input
          placeholder="Type your name here"
          type="text"
          value={value}
          onChange={handleChange}
          className={`border-2 p-2 rounded-lg text-sm w-56 focus:outline-none border-[#e8e8e8] dark:border-[#4c4c4c] dark:bg-[#2a2a2a] text-[#121212] dark:text-[#f1f1f1] ${
            hasError ? 'border-[#ffcdd2] dark:border-[#e57373]' : isCorrect ? '' : 'border-[#e8e8e8] dark:border-[#4c4c4c]'}`}/>

        {!hasError && isCorrect && (
          <div className="pl-2 text-[#a5d6a7]">
            <CircleCheck />
          </div>
        )}

        {hasError && (
          <div className="pl-2 text-[#e57373]">
            <CircleX />
          </div>
        )}
      </div>

      {hasError && <p className="text-[#D32F2F] text-xs pt-2">This field is required</p>}
    </div>
  )
}