feat: create basic layout for new new event page
This commit is contained in:
parent
d7da7f85cd
commit
3de329b157
4 changed files with 160 additions and 12 deletions
|
@ -1,4 +1,4 @@
|
|||
import { Input } from '@/components/ui/input';
|
||||
import { Input, Textarea } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
|
||||
export default function LabeledInput({
|
||||
|
@ -7,6 +7,7 @@ export default function LabeledInput({
|
|||
placeholder,
|
||||
value,
|
||||
name,
|
||||
big = false, // Add a prop for the bigger variant, default is false
|
||||
autocomplete,
|
||||
error,
|
||||
...rest
|
||||
|
@ -16,22 +17,32 @@ export default function LabeledInput({
|
|||
placeholder?: string;
|
||||
value?: string;
|
||||
name?: string;
|
||||
big?: boolean; // Optional prop for bigger input
|
||||
autocomplete?: string;
|
||||
error?: string;
|
||||
} & React.InputHTMLAttributes<HTMLInputElement>) {
|
||||
return (
|
||||
<div className='grid grid-cols-1 gap-1'>
|
||||
<Label htmlFor={name}>{label}</Label>
|
||||
|
||||
<Input
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
defaultValue={value}
|
||||
id={name}
|
||||
name={name}
|
||||
autoComplete={autocomplete}
|
||||
{...rest}
|
||||
/>
|
||||
{big ? (
|
||||
<Textarea
|
||||
placeholder={placeholder}
|
||||
defaultValue={value}
|
||||
id={name}
|
||||
name={name}
|
||||
rows={3}
|
||||
/>
|
||||
) : (
|
||||
<Input
|
||||
type={type}
|
||||
placeholder={placeholder}
|
||||
defaultValue={value}
|
||||
id={name}
|
||||
name={name}
|
||||
autoComplete={autocomplete}
|
||||
{...rest}
|
||||
/>
|
||||
)}
|
||||
{error && <p className='text-red-500 text-sm mt-1'>{error}</p>}
|
||||
</div>
|
||||
);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue