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

src/app/home/new-event/page.tsx

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

src/components/buttons/event-form.tsx

@@ -2,9 +2,13 @@ import LabeledInput from '@/components/labeled-input';
 import { Button } from '@/components/custom-ui/button';
 import Logo from '../logo';
 import TimePicker from '../time-picker';
-import { Input } from '../ui/input';
 import { Label } from '../ui/label';
-export default function EventForm() {
+
+type eventFormProps = {
+  type?: 'create' | 'edit';
+};
+
+export default function EventForm({ type = 'edit' }: eventFormProps) {
   return (
     <form
       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='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} />
           </div>
           <div className='items-center ml-auto mr-auto max-sm:mb-6'>
             <LabeledInput
               type='text'
               label='Event Name'
-              placeholder='New Event'
+              placeholder={type === 'create' ? 'New Event' : 'Event Name'}
               name='eventName'
+              size='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>
@@ -34,9 +40,13 @@ export default function EventForm() {
           <div>
             <TimePicker dateLabel='end Time' timeLabel='&nbsp;' />
           </div>
-          <div>
-            <p className='mb-2'>Location URL</p>
-            <Input type='url' className='w-54' />
+          <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'>
@@ -67,7 +77,7 @@ export default function EventForm() {
                 label='Event Description'
                 placeholder='What is the event about?'
                 name='eventDescription'
-                big={true}
+                size='textarea'
               ></LabeledInput>
             </div>
           </div>