fix: update LabeledInput component to use Label from UI library and adjust spacing in LoginForm
This commit is contained in:
parent
b87a761808
commit
7555cb4fe8
2 changed files with 6 additions and 5 deletions
|
@ -1,4 +1,5 @@
|
||||||
import { Input } from '@/components/ui/input';
|
import { Input } from '@/components/ui/input';
|
||||||
|
import { Label } from '@/components/ui/label';
|
||||||
|
|
||||||
export default function LabeledInput({
|
export default function LabeledInput({
|
||||||
type,
|
type,
|
||||||
|
@ -11,17 +12,17 @@ export default function LabeledInput({
|
||||||
placeholder?: string;
|
placeholder?: string;
|
||||||
value?: string;
|
value?: string;
|
||||||
}) {
|
}) {
|
||||||
const randomId = Math.random().toString(36).substring(2, 15);
|
const elementId = Math.random().toString(36).substring(2, 15);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='flex flex-col gap-2'>
|
<div className='flex flex-col gap-1'>
|
||||||
<label htmlFor={randomId}>{label}</label>
|
<Label htmlFor={elementId}>{label}</Label>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
type={type}
|
type={type}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
defaultValue={value}
|
defaultValue={value}
|
||||||
id={randomId}
|
id={elementId}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -3,7 +3,7 @@ import { Button } from '@/components/ui/button';
|
||||||
|
|
||||||
export default function LoginForm() {
|
export default function LoginForm() {
|
||||||
return (
|
return (
|
||||||
<form className='flex flex-col gap-4 w-full'>
|
<form className='flex flex-col gap-5 w-full'>
|
||||||
<LabeledInput
|
<LabeledInput
|
||||||
type='email'
|
type='email'
|
||||||
label='E-Mail'
|
label='E-Mail'
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue