105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
import LabeledInput from '@/components/labeled-input';
|
|
import { Button } from '@/components/custom-ui/button';
|
|
import Logo from '../logo';
|
|
import TimePicker from '../time-picker';
|
|
import { Label } from '../ui/label';
|
|
|
|
type eventFormProps = {
|
|
type?: 'create' | 'edit';
|
|
};
|
|
|
|
export default function EventForm({ type = 'edit' }: eventFormProps) {
|
|
return (
|
|
<form
|
|
className='flex flex-col gap-5 w-full'
|
|
action={async (formData) => {
|
|
'use server';
|
|
console.log('Form submitted with data:', formData);
|
|
}}
|
|
>
|
|
<div className='grid grid-row-start:auto gap-8'>
|
|
<div className='h-full mt-0 ml-2 mb-16 flex items-center justify-between max-sm:flex-col max-sm:mb-6 max-sm:mt-10'>
|
|
<div className='w-[50px]'>
|
|
<Logo colorType='monochrome' logoType='submark' width={50} />
|
|
</div>
|
|
<div className='items-center ml-auto mr-auto max-sm:mb-6'>
|
|
<LabeledInput
|
|
type='text'
|
|
label='Event Name'
|
|
placeholder={type === 'create' ? 'New Event' : 'Event Name'}
|
|
name='eventName'
|
|
variantSize='big'
|
|
/>
|
|
</div>
|
|
<div className='w-0 sm:w-[50px]'></div>
|
|
</div>
|
|
<div className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
|
|
<div>
|
|
<TimePicker dateLabel='start Time' timeLabel=' ' />
|
|
</div>
|
|
<div>
|
|
<TimePicker dateLabel='end Time' timeLabel=' ' />
|
|
</div>
|
|
<div className='w-54'>
|
|
<LabeledInput
|
|
type='text'
|
|
label='Location'
|
|
placeholder='where is the event?'
|
|
name='eventLocation'
|
|
/>
|
|
</div>
|
|
<div className='flex flex-col gap-4'>
|
|
<div className='flex flex-row gap-2'>
|
|
<Label>created:</Label>
|
|
<Label className='text-[var(--color-neutral-300)]'>
|
|
2023-10-01
|
|
</Label>
|
|
</div>
|
|
<div className='flex flex-row gap-2'>
|
|
<Label>updated:</Label>
|
|
<p className='text-[var(--color-neutral-300)]'>2023-10-01</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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'>
|
|
<div className='flex flex-row gap-2'>
|
|
<Label>Organiser:</Label>
|
|
<Label className='text-[var(--color-neutral-300)]'>
|
|
[Username here]
|
|
</Label>
|
|
</div>
|
|
</div>
|
|
<div className='h-full w-full'>
|
|
<LabeledInput
|
|
type='text'
|
|
label='Event Description'
|
|
placeholder='What is the event about?'
|
|
name='eventDescription'
|
|
variantSize='textarea'
|
|
></LabeledInput>
|
|
</div>
|
|
</div>
|
|
<div className='h-full w-full'>
|
|
<Label>Participants here</Label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
|
|
<div className='w-[20%] grid max-sm:w-[40%]'>
|
|
<Button type='button' variant='secondary'>
|
|
cancel
|
|
</Button>
|
|
</div>
|
|
|
|
<div className='w-[20%] grid max-sm:w-[40%]'>
|
|
<Button type='submit' variant='primary'>
|
|
save event
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|