26 lines
688 B
TypeScript
26 lines
688 B
TypeScript
import { useFormField } from '@hooks/useFormField';
|
|
import { XCircle } from 'lucide-react';
|
|
import * as React from 'react';
|
|
|
|
export const FormErrorMessage = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(() => {
|
|
const { error, formMessageId } = useFormField();
|
|
const body = error?.message;
|
|
|
|
return (
|
|
body && (
|
|
<div
|
|
id={formMessageId}
|
|
className='flex items-center justify-center gap-2 text-sm text-red-500 duration-200 animate-in fade-in slide-in-from-top-1'
|
|
>
|
|
<XCircle className='h-4 w-4' />
|
|
<span>{body}</span>
|
|
</div>
|
|
)
|
|
);
|
|
});
|
|
|
|
FormErrorMessage.displayName = 'FormErrorMessage';
|