feat(event-form): enhance event form layout with TimePicker and input fields
This commit is contained in:
parent
f326bd8e1a
commit
43e24222cc
1 changed files with 28 additions and 14 deletions
|
@ -1,6 +1,8 @@
|
||||||
import LabeledInput from '@/components/labeled-input';
|
import LabeledInput from '@/components/labeled-input';
|
||||||
import { Button } from '@/components/custom-ui/button';
|
import { Button } from '@/components/custom-ui/button';
|
||||||
import Logo from '../logo';
|
import Logo from '../logo';
|
||||||
|
import TimePicker from '../time-picker';
|
||||||
|
import { Input } from '../ui/input';
|
||||||
export default function EventForm() {
|
export default function EventForm() {
|
||||||
return (
|
return (
|
||||||
<form
|
<form
|
||||||
|
@ -11,11 +13,11 @@ export default function EventForm() {
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<div className='grid grid-row-start:auto gap-4'>
|
<div className='grid grid-row-start:auto gap-4'>
|
||||||
<div className='h-full mt-2 mb-6 flex items-center justify-between'>
|
<div className='h-full mt-2 mb-6 flex items-center justify-between max-sm:flex-col max-sm:mb-2'>
|
||||||
<div>
|
<div>
|
||||||
<Logo colorType='monochrome' logoType='submark' width={50} />
|
<Logo colorType='monochrome' logoType='submark' width={50} />
|
||||||
</div>
|
</div>
|
||||||
<div className='items-center ml-auto mr-auto'>
|
<div className='items-center ml-auto mr-auto max-sm:mb-6'>
|
||||||
<LabeledInput
|
<LabeledInput
|
||||||
type='text'
|
type='text'
|
||||||
label='Event Name'
|
label='Event Name'
|
||||||
|
@ -24,25 +26,37 @@ export default function EventForm() {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='grid grid-cols-4 gap-4 h-full w-full'>
|
<div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
|
||||||
<div>
|
<div>
|
||||||
<p>Start Date select here</p>
|
<TimePicker dateLabel='start Time' timeLabel=' ' />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>End Date selevt here</p>
|
<TimePicker dateLabel='end Time' timeLabel=' ' />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p>Location here</p>
|
<p className='mb-2'>Location URL</p>
|
||||||
|
<Input type='url' className='w-54' />
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className='flex flex-col gap-4'>
|
||||||
<p>creatd:</p>
|
<div className='flex flex-row gap-2'>
|
||||||
<p>updated:</p>
|
<p>created:</p>
|
||||||
|
<p className='text-[var(--color-neutral-300)]'>2023-10-01</p>
|
||||||
|
</div>
|
||||||
|
<div className='flex flex-row gap-2'>
|
||||||
|
<p>updated:</p>
|
||||||
|
<p className='text-[var(--color-neutral-300)]'>2023-10-01</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='h-full w-full grid grid-cols-2 gap-4'>
|
<div className='h-full w-full grid grid-cols-2 gap-4 max-sm:grid-cols-1'>
|
||||||
<div className='h-full w-full grid grid-flow-row gap-4'>
|
<div className='h-full w-full grid grid-flow-row gap-4'>
|
||||||
<div className='h-full w-full'>
|
<div className='h-full w-full'>
|
||||||
<p>Organiser:</p>
|
<div className='flex flex-row gap-2'>
|
||||||
|
<p>Organiser:</p>
|
||||||
|
<p className='text-[var(--color-neutral-300)]'>
|
||||||
|
[Username here]
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='h-full w-full'>
|
<div className='h-full w-full'>
|
||||||
<LabeledInput
|
<LabeledInput
|
||||||
|
@ -60,13 +74,13 @@ export default function EventForm() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
|
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
|
||||||
<div className='w-[20%] grid'>
|
<div className='w-[20%] grid max-sm:w-[40%]'>
|
||||||
<Button type='submit' variant='secondary'>
|
<Button type='button' variant='secondary'>
|
||||||
cancel
|
cancel
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className='w-[20%] grid'>
|
<div className='w-[20%] grid max-sm:w-[40%]'>
|
||||||
<Button type='submit' variant='primary'>
|
<Button type='submit' variant='primary'>
|
||||||
save event
|
save event
|
||||||
</Button>
|
</Button>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue