added meeting form page

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

@@ -0,0 +1,47 @@
+import { Input } from '@/components/ui/input'
+import { ChevronLeft } from 'lucide-react'
+import React 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'
+
+const MeetingForm = () => {
+    
+  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>
+        <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'/>
+            <p className='font-semibold'>Meeting Length <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>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuItem>15 minutes</DropdownMenuItem>
+                    <DropdownMenuItem>30 minutes</DropdownMenuItem>
+                    <DropdownMenuItem>45 minutes</DropdownMenuItem>
+                    <DropdownMenuItem>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'>
+                        <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>
+            <Input placeholder='Add url' className='text-sm'/>
+        </div>
+    </div>
+  )
+}
+
+export default MeetingForm

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import MeetingForm from './_components/meetingForm'
+
+const CreateMeeting = () => {
+  return (
+    <div className='grid grid-cols-1 md:grid-cols-3'>
+        <div className='h-screen shadow-md'>
+            <MeetingForm/>
+        </div>
+        <div className='md:col-span-2'></div>
+    </div>
+  )
+}
+
+export default CreateMeeting

scheduler_app/app/(routes)/dashboard/_components/sideNav.js

@@ -10,30 +10,31 @@ const menu = [
     {
         id: 1,
         name: 'Meeting',
-        path: 'dashboard/meeting',
+        path: '/dashboard/meeting',
         icon: BriefcaseBusiness
     },
     {
         id: 2,
         name: 'Scheduled Meeting',
-        path: 'dashboard/scheduled_meeting',
+        path: '/dashboard/scheduled_meeting',
         icon: CalendarClock
     },
     {
         id: 3,
         name: 'Availability',
-        path: 'dashboard/availability',
+        path: '/dashboard/availability',
         icon: Clock
     },
     {
         id: 4,
         name: 'Setting',
-        path: 'dashboard/setting',
+        path: '/dashboard/setting',
         icon: Settings
     }        
 ]
 
 const SideNav = () => {
+    
     const path = usePathname();
     const [activePath, setActivePath] = useState(path);
 
@@ -46,11 +47,13 @@ const SideNav = () => {
         <div className='flex justify-center'>
             <p className='text-xl uppercase font-semibold tracking-wide'>Schedule.Me</p>
         </div>
-        <Button className="flex gap-2 w-full mt-10">Create</Button>
+        <Link href={'/create_meeting'}>
+            <Button className="flex gap-2 w-full mt-10">Create</Button>
+        </Link>
         <div className='mt-5'>
             {menu.map((item, index) => (
                 <Link href={item.path} key={index}>
-                    <Button variant="ghost" className={`w-full flex justify-start gap-2 mt-2 hover:bg-gray-200 ${activePath == item.path && 'bg-gray-800 text-white'}`}>
+                    <Button variant="ghost" className={`w-full flex justify-start gap-2 mt-2 hover:bg-gray-200 ${activePath == item.path && 'bg-gray-200'}`}>
                         <item.icon/>
                         {item.name}
                     </Button>

scheduler_app/app/_utils/LocationOption.js

@@ -0,0 +1,18 @@
+export default[
+    {
+        name: 'Zoom',
+        icon: '/zoom.png'
+    },
+    {
+        name: 'Google Meet',
+        icon: '/googleMeet.png'
+    },
+    {
+        name: 'Phone',
+        icon: '/phone.png'
+    },
+    {
+        name: 'Other',
+        icon: '/menu.png'
+    },
+]

scheduler_app/middleware.ts

@@ -12,5 +12,5 @@ export async function middleware(request) {
  
 // See "Matching Paths" below to learn more
 export const config = {
-  matcher: '/dashboard/:path*',
+  matcher: ['/dashboard/:path*', '/create_business'],
 }