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>
);
}