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

feat(event-form): enhance event form layout with TimePicker and input fields

Browse source
This commit is contained in:
micha 2025-06-11 19:58:28 +02:00
parent f5eb4fe7d5
commit 94013d03ae
1 changed files with 28 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -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='&nbsp;' />
</div> </div>
<div> <div>
<p>End Date selevt here</p> <TimePicker dateLabel='end Time' timeLabel='&nbsp;' />
</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>