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

feat: create basic layout for new new event page

Browse source
This commit is contained in:
micha 2025-06-11 16:52:53 +02:00
parent e372cf6e90
commit f69d5696a5
4 changed files with 160 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

78
src/components/buttons/event-form.tsx Normal file
View file

@ -0,0 +1,78 @@
import LabeledInput from '@/components/labeled-input';
import { Button } from '@/components/custom-ui/button';
import Logo from '../logo';
export default function EventForm() {
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-4'>
<div className='h-full mt-2 mb-6 flex items-center justify-between'>
<div>
<Logo colorType='monochrome' logoType='submark' width={50} />
</div>
<div className='items-center ml-auto mr-auto'>
<LabeledInput
type='text'
label='Event Name'
placeholder='New Event'
name='eventName'
/>
</div>
</div>
<div className='grid grid-cols-4 gap-4 h-full w-full'>
<div>
<p>Start Date select here</p>
</div>
<div>
<p>End Date selevt here</p>
</div>
<div>
<p>Location here</p>
</div>
<div>
<p>creatd:</p>
<p>updated:</p>
</div>
</div>
<div className='h-full w-full grid grid-cols-2 gap-4'>
<div className='h-full w-full grid grid-flow-row gap-4'>
<div className='h-full w-full'>
<p>Organiser:</p>
</div>
<div className='h-full w-full'>
<LabeledInput
type='text'
label='Event Description'
placeholder='What is the event about?'
name='eventDescription'
big={true}
></LabeledInput>
</div>
</div>
<div className='h-full w-full'>
<p>Participants here</p>
</div>
</div>
<div className='flex flex-row gap-2 justify-end mt-4 mb-6'>
<div className='w-[20%] grid'>
<Button type='submit' variant='secondary'>
cancel
</Button>
</div>
<div className='w-[20%] grid'>
<Button type='submit' variant='primary'>
save event
</Button>
</div>
</div>
</div>
</form>
);
}