71 lines
2.4 KiB
TypeScript
71 lines
2.4 KiB
TypeScript
import React, { forwardRef } from 'react';
|
|
|
|
export const FormInput = forwardRef<HTMLInputElement, any>(
|
|
({ label, error, className = "", ...props }, ref) => (
|
|
<div className={`${className} relative`}>
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{label}
|
|
{props.required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
<input
|
|
ref={ref}
|
|
className={`
|
|
w-full px-4 py-2 rounded-lg
|
|
border border-gray-300 dark:border-gray-600
|
|
bg-white dark:bg-gray-700
|
|
text-gray-900 dark:text-white
|
|
placeholder-gray-400 dark:placeholder-gray-500
|
|
focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400
|
|
focus:border-transparent
|
|
transition-colors
|
|
${error ? "border-red-300 focus:ring-red-500" : ""}
|
|
`}
|
|
{...props}
|
|
/>
|
|
{error && (
|
|
<p className="mt-1 text-sm text-red-600 dark:text-red-400">{error}</p>
|
|
)}
|
|
</div>
|
|
)
|
|
);
|
|
|
|
export const FormSelect = forwardRef<HTMLSelectElement, any>(
|
|
({ label, error, options, className = "", ...props }, ref) => (
|
|
<div className={`${className} relative`}>
|
|
<label className="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">
|
|
{label}
|
|
{props.required && <span className="text-red-500 ml-1">*</span>}
|
|
</label>
|
|
<select
|
|
ref={ref}
|
|
className={`
|
|
w-full px-4 py-3 rounded-lg
|
|
border border-gray-300 dark:border-gray-600
|
|
bg-white dark:bg-gray-700
|
|
text-gray-900 dark:text-white
|
|
transition duration-150 ease-in-out
|
|
focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400
|
|
focus:border-transparent
|
|
hover:border-gray-400 dark:hover:border-gray-500
|
|
appearance-none
|
|
${error ? "border-red-300 focus:ring-red-500" : ""}
|
|
`}
|
|
{...props}
|
|
>
|
|
<option value="" className="dark:bg-gray-700">Selecione...</option>
|
|
{options?.map((opt: any) => (
|
|
<option key={opt.value} value={opt.value} className="dark:bg-gray-700">
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{error && (
|
|
<div className="absolute -bottom-5 left-0">
|
|
<p className="text-xs text-red-500 dark:text-red-400">{error}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
),
|
|
);
|
|
|
|
// Adicione classes dark mode similares para outros componentes de formulário
|