riccardo/newsletter-hackernews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keep input elements aligned when displaying error message

Browse Source
This commit is contained in:
Riccardo
2023-12-17 21:03:41 +01:00
parent 9a43e25659
commit 24ee55131e
3 changed files with 62 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
app/page.tsx
View File

@@ -80,26 +80,30 @@ export default function Home() {
}
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleSubmit)}
className='flex items-center justify-center space-x-4'
>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder='example@example.com' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type='submit'>Submit</Button>
</form>
</Form>
<div className='h-12 align-top'>
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleSubmit)}
className='flex space-x-4'
>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder='example@example.com' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className='align-top'>
<Button type='submit'>Submit</Button>
</div>
</form>
</Form>
</div>
);
}

44
app/unsubscribe/page.tsx
View File

@@ -80,26 +80,30 @@ export default function Unsubscribe() {
}
return (
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleSubmit)}
className='flex items-center justify-center space-x-4'
>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder='example@example.com' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<Button type='submit'>Submit</Button>
</form>
</Form>
<div className='h-12 align-top'>
<Form {...form}>
<form
onSubmit={form.handleSubmit(handleSubmit)}
className='flex space-x-4'
>
<FormField
control={form.control}
name='email'
render={({ field }) => (
<FormItem>
<FormControl>
<Input placeholder='example@example.com' {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className='align-top'>
<Button type='submit'>Submit</Button>
</div>
</form>
</Form>
</div>
);
}

27
components/ui/form.tsx
View File

@@ -133,7 +133,7 @@ const FormDescription = React.forwardRef<
<p
ref={ref}
id={formDescriptionId}
className={cn('text-muted-foreground text-sm', className)}
className={cn('text-sm text-muted-foreground', className)}
{...props}
/>
);
@@ -147,21 +147,22 @@ const FormMessage = React.forwardRef<
const { error, formMessageId } = useFormField();
const body = error ? String(error?.message) : children;
if (!body) {
return null;
}
return (
<p
ref={ref}
id={formMessageId}
className={cn('text-destructive text-sm font-medium', className)}
{...props}
>
{body}
</p>
<>
{!body ? null : (
<p
ref={ref}
id={formMessageId}
className={cn('text-sm font-medium text-destructive', className)}
{...props}
>
{body}
</p>
)}
</>
);
});
FormMessage.displayName = 'FormMessage';
export {