updated craete evnt form functionality

scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js

@@ -1,45 +1,80 @@
+"use client"
 import { Input } from '@/components/ui/input'
 import { ChevronLeft } from 'lucide-react'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger,} from "@/components/ui/dropdown-menu"
 import LocationOption from '@/app/_utils/LocationOption'
 import Image from 'next/image'
+import { Button } from '@/components/ui/button'
+import Link from 'next/link'
+import ThemeOption from '@/app/_utils/ThemeOption'
+
+const MeetingForm = ({setFormEvent}) => {
+    const [themeColor, setThemeColor] = useState();
+
+    //set state for each event
+    const [eventName, setEventName] = useState();
+    const [timeDuration, setTimeDuration] = useState(30);
+    const [locationMeeting, setLocationMeeting] = useState();
+    const [urlMeeting, setUrlMeeting] = useState();
 
-const MeetingForm = () => {
     
+    useEffect(() => {
+        setFormEvent({
+            eventName: eventName,
+            timeDuration: timeDuration,
+            locationMeeting: locationMeeting,
+            urlMeeting: urlMeeting,
+            themeColor: themeColor
+        })
+    }, [eventName, timeDuration, locationMeeting, urlMeeting, themeColor])
+
+
+
   return (
     <div className='px-5 lg:px-10 py-10'>
-        <p className='flex gap-1 text-red-500 hover:text-red-600'><ChevronLeft/>Go back</p>
+        <Link href={'/dashboard'}><p className='flex gap-1 text-red-500 hover:text-red-600'><ChevronLeft/>Go back</p></Link>
         <div className='mt-5'>
             <p className='text-xl font-semibold mb-2'>Create New Event</p><hr/>
         </div>
         <div className='flex flex-col gap-2'>
             <p className='font-semibold mt-5'>Event Name <span className='text-red-500'>*</span></p>
-            <Input placeholder="Enter your event/meeting name" className='text-sm'/>
+            <Input onChange={(ev) => setEventName(ev.target.value)} placeholder="Enter your event/meeting name" className='text-sm'/>
-            <p className='font-semibold'>Meeting Length <span className='text-red-500'>*</span></p>
+            <p className='font-semibold'>Time Duration <span className='text-red-500'>*</span></p>
             <DropdownMenu>
                 <DropdownMenuTrigger asChild className='outline-none'>
-                    <button className='max-w-20 border rounded-md px-2 py-2 text-sm'>Select</button>
+                    <button className=' max-w-[100px] border rounded-md px-2 py-2 text-sm'>{timeDuration} minutes</button>
                 </DropdownMenuTrigger>
                 <DropdownMenuContent>
-                    <DropdownMenuItem>15 minutes</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setTimeDuration(15)}>15 minutes</DropdownMenuItem>
-                    <DropdownMenuItem>30 minutes</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setTimeDuration(30)}>30 minutes</DropdownMenuItem>
-                    <DropdownMenuItem>45 minutes</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setTimeDuration(45)}>45 minutes</DropdownMenuItem>
-                    <DropdownMenuItem>60 minutes</DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => setTimeDuration(60)}>60 minutes</DropdownMenuItem>
                 </DropdownMenuContent>
             </DropdownMenu>
             <p className='font-semibold'>Location <span className='text-red-500'>*</span></p>
             <div className='grid grid-cols-4 gap-2'>
                 {LocationOption.map((option, index) => (
-                    <div className='border rounded-md flex flex-col justify-center items-center text-center p-2 hover:bg-gray-200 cursor-pointer'>
+                    <div onClick={() => setLocationMeeting(option.name)} className={`border rounded-md flex flex-col justify-center items-center text-center p-2 hover:bg-gray-200 cursor-pointer ${locationMeeting == option.name && 'bg-gray-200'}`}>
                         <Image src={option.icon} width={20} height={20} alt={option.name}/>
                         <p className='text-xs mt-2 font-semibold'>{option.name}</p>
                     </div>
                 ))}
             </div>
-            <p className='font-semibold'>Add url</p>
+            {locationMeeting && 
-            <Input placeholder='Add url' className='text-sm'/>
+            <div>
+                <p className='font-semibold'> Add {locationMeeting} url <span className='text-red-500'>*</span></p>
+                <Input onChange={(ev) => setUrlMeeting(ev.target.value)} placeholder='Add url' className='text-sm'/>
+            </div>
+            }
+            <p className='font-semibold'>Select Color</p>
+            <div className='flex justify-evenly'>
+                {ThemeOption.map((color,index) => (
+                    <div onClick={() => setThemeColor(color)} className={`h-6 w-6 rounded-full ${themeColor == color && 'border-2 border-black'}`} style={{backgroundColor:color}}></div>
+                ))}
+            </div>
         </div>
+        <Button disabled={(!eventName || !timeDuration || !locationMeeting || !urlMeeting)} className='w-full mt-10'>Create Event</Button>
     </div>
   )
 }

scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const PreviewMeeting = () => {
+  return (
+    <div>This is a preview meeting section</div>
+  )
+}
+
+export default PreviewMeeting

scheduler_app/app/(routes)/create_meeting/page.js

@@ -1,13 +1,19 @@
-import React from 'react'
+"use client"
+import React, { useState } from 'react'
 import MeetingForm from './_components/meetingForm'
+import PreviewMeeting from './_components/previewMeeting';
 
 const CreateMeeting = () => {
+    const [formEvent, setFormEvent] = useState();
+
   return (
     <div className='grid grid-cols-1 md:grid-cols-3'>
         <div className='h-screen shadow-md'>
-            <MeetingForm/>
+            <MeetingForm setFormEvent={(value) => setFormEvent(value)}/>
+        </div>
+        <div className='md:col-span-2'>
+            <PreviewMeeting/>
         </div>
-        <div className='md:col-span-2'></div>
     </div>
   )
 }

scheduler_app/app/_utils/ThemeOption.js

@@ -0,0 +1,11 @@
+export default [
+    '#E90133',
+    '#0072B1',
+    '#FFC82D',
+    '#EB7124',
+    '#55A61D',
+    '#7F139A',
+    '#E97FA7',
+    '#94774D',
+    '#84898C',
+]