ui/src/components/ErrorMessage.tsx · sphinx

on master help sign in

sphinx/ui/src/components/ErrorMessage.tsx

26 lines 719 B history raw

1import cn from 'classnames';

2import React from 'react';

3import { FieldValues, LiteralUnion, RegisterOptions, useFormContext } from 'react-hook-form';

5type Validation = LiteralUnion<keyof RegisterOptions, string>;

7interface ErrorMessageProps<T extends FieldValues> {

8 field: keyof T;

9 messages: Partial<Record<Validation, string>>;

10 className?: string;

13export function ErrorMessage<T extends FieldValues>({ field, messages, className }: ErrorMessageProps<T>) {

14 const { formState } = useFormContext<T>();

15 const error = formState.errors[field];

17 if (!error) {

18 return null;

19 }

21 return (

22 <p className={cn('text-xs text-red-500', className)}>

23 {messages[error.type as Validation]}

24 </p>

25 )