DHBW-WE/MeetUp
5
0
Fork 0
Code Issues 7 Pull requests 5 Projects 1 Releases 5 Packages 1 Wiki Activity Actions

feat(event-form): add type prop to EventForm for create/edit functionality

Browse source
This commit is contained in:
micha 2025-06-12 13:25:44 +02:00
parent 7bccd3405d
commit ae7079dbfa
2 changed files with 19 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/app/home/new-event/page.tsx
View file

@ -10,7 +10,7 @@ export default function NewEvent() {
<CardHeader className='p-0 m-0 gap-0' /> <CardHeader className='p-0 m-0 gap-0' />
<CardContent> <CardContent>
<EventForm /> <EventForm type='create' />
</CardContent> </CardContent>
</Card> </Card>
</div> </div>

26
src/components/buttons/event-form.tsx
View file

@ -2,9 +2,13 @@ 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 TimePicker from '../time-picker';
import { Input } from '../ui/input';
import { Label } from '../ui/label'; import { Label } from '../ui/label';
export default function EventForm() {
type eventFormProps = {
type?: 'create' | 'edit';
};
export default function EventForm({ type = 'edit' }: eventFormProps) {
return ( return (
<form <form
className='flex flex-col gap-5 w-full' className='flex flex-col gap-5 w-full'
@ -15,17 +19,19 @@ export default function EventForm() {
> >
<div className='grid grid-row-start:auto gap-8'> <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='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> <div className='w-[50px]'>
<Logo colorType='monochrome' logoType='submark' width={50} /> <Logo colorType='monochrome' logoType='submark' width={50} />
</div> </div>
<div className='items-center ml-auto mr-auto max-sm:mb-6'> <div className='items-center ml-auto mr-auto max-sm:mb-6'>
<LabeledInput <LabeledInput
type='text' type='text'
label='Event Name' label='Event Name'
placeholder='New Event' placeholder={type === 'create' ? 'New Event' : 'Event Name'}
name='eventName' name='eventName'
size='big'
/> />
</div> </div>
<div className='w-0 sm:w-[50px]'></div>
</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 className='grid grid-cols-4 gap-4 h-full w-full max-lg:grid-cols-2 max-sm:grid-cols-1'>
<div> <div>
@ -34,9 +40,13 @@ export default function EventForm() {
<div> <div>
<TimePicker dateLabel='end Time' timeLabel='&nbsp;' /> <TimePicker dateLabel='end Time' timeLabel='&nbsp;' />
</div> </div>
<div> <div className='w-54'>
<p className='mb-2'>Location URL</p> <LabeledInput
<Input type='url' className='w-54' /> type='text'
label='Location'
placeholder='where is the event?'
name='eventLocation'
/>
</div> </div>
<div className='flex flex-col gap-4'> <div className='flex flex-col gap-4'>
<div className='flex flex-row gap-2'> <div className='flex flex-row gap-2'>
@ -67,7 +77,7 @@ export default function EventForm() {
label='Event Description' label='Event Description'
placeholder='What is the event about?' placeholder='What is the event about?'
name='eventDescription' name='eventDescription'
big={true} size='textarea'
></LabeledInput> ></LabeledInput>
</div> </div>
</div> </div>