diff --git a/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js b/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js index a67953b..ade0663 100644 --- a/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js +++ b/scheduler_app/app/(routes)/create_meeting/_components/meetingForm.js @@ -18,7 +18,6 @@ const MeetingForm = ({setFormEvent}) => { const [locationMeeting, setLocationMeeting] = useState(); const [urlMeeting, setUrlMeeting] = useState(); - useEffect(() => { setFormEvent({ eventName: eventName, @@ -30,7 +29,6 @@ const MeetingForm = ({setFormEvent}) => { }, [eventName, timeDuration, locationMeeting, urlMeeting, themeColor]) - return (

Go back

@@ -55,7 +53,7 @@ const MeetingForm = ({setFormEvent}) => {

Location *

{LocationOption.map((option, index) => ( -
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'}`}> +
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'}`}> {option.name}/

{option.name}

@@ -63,14 +61,14 @@ const MeetingForm = ({setFormEvent}) => {
{locationMeeting &&
-

Add {locationMeeting} url *

+

Add {locationMeeting} url or number *

setUrlMeeting(ev.target.value)} placeholder='Add url' className='text-sm'/>
}

Select Color

{ThemeOption.map((color,index) => ( -
setThemeColor(color)} className={`h-6 w-6 rounded-full ${themeColor == color && 'border-2 border-black'}`} style={{backgroundColor:color}}>
+
setThemeColor(color)} className={`h-6 w-6 rounded-full ${themeColor == color && 'border-2 border-black'}`} style={{backgroundColor:color}}>
))}
diff --git a/scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js b/scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js index 79af2dc..dc9b093 100644 --- a/scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js +++ b/scheduler_app/app/(routes)/create_meeting/_components/previewMeeting.js @@ -1,8 +1,59 @@ -import React from 'react' +import { GoClock } from "react-icons/go"; +import { PiMapPinLight } from "react-icons/pi"; +import { Calendar } from "@/components/ui/calendar" +import React, { useEffect, useState } from 'react' +import Link from "next/link"; +import { Button } from '@/components/ui/button' -const PreviewMeeting = () => { +const PreviewMeeting = ({formEvent}) => { + const [date, setDate] = useState(new Date()); + const [timeSlots, setTimeSlots] = useState(); + + useEffect(() => { + formEvent?.timeDuration && createTimeSlot(formEvent?.timeDuration) + }, [formEvent]) + //create time slot + const createTimeSlot = (interval) => { + const startTime = 8 * 60; + const endTime = 22 * 60; + const totalSlots = (endTime - startTime) / interval; + const slots = Array.from({length: totalSlots}, (_, i) => { + const totalMinutes = startTime + i * interval; + const hours = Math.floor(totalMinutes / 60); + const minutes = totalMinutes % 60; + const formattedHours = hours > 12 ? hours - 12: hours; + const period = hours >= 12? 'PM' : 'AM'; + return `${String(formattedHours).padStart(2, '0')} : ${String(minutes).padStart(2, '0')} ${period}` + }); + setTimeSlots(slots); + } + + return ( -
This is a preview meeting section
+
+

Schedule.Me

+
+
+

Event Name: {formEvent?.eventName?formEvent?.eventName:'Meeting/Event Name'}

+
+

{formEvent?.timeDuration} minutes

+

{formEvent?.locationMeeting}

+ {formEvent?.urlMeeting} +
+
+
+
+

Select your meeting date & time

+ +
+
+ {timeSlots?.map((time, index) => ( + + ))} +
+
+
+
) } diff --git a/scheduler_app/app/(routes)/create_meeting/page.js b/scheduler_app/app/(routes)/create_meeting/page.js index 47c5cd5..6019a51 100644 --- a/scheduler_app/app/(routes)/create_meeting/page.js +++ b/scheduler_app/app/(routes)/create_meeting/page.js @@ -12,7 +12,7 @@ const CreateMeeting = () => { setFormEvent(value)}/>
- +
) diff --git a/scheduler_app/components/ui/calendar.jsx b/scheduler_app/components/ui/calendar.jsx new file mode 100644 index 0000000..fcf6c46 --- /dev/null +++ b/scheduler_app/components/ui/calendar.jsx @@ -0,0 +1,62 @@ +"use client"; +import * as React from "react" +import { ChevronLeft, ChevronRight } from "lucide-react" +import { DayPicker } from "react-day-picker" + +import { cn } from "@/lib/utils" +import { buttonVariants } from "@/components/ui/button" + +function Calendar({ + className, + classNames, + showOutsideDays = true, + ...props +}) { + return ( + ( , + IconRight: ({ ...props }) => , + }} + {...props} />) + ); +} +Calendar.displayName = "Calendar" + +export { Calendar } diff --git a/scheduler_app/package-lock.json b/scheduler_app/package-lock.json index a4d5d37..f89d5e8 100644 --- a/scheduler_app/package-lock.json +++ b/scheduler_app/package-lock.json @@ -13,11 +13,13 @@ "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", "firebase": "^10.11.0", "lucide-react": "^0.373.0", "next": "14.2.3", "next-themes": "^0.3.0", "react": "^18", + "react-day-picker": "^8.10.1", "react-dom": "^18", "react-icons": "^5.1.0", "sonner": "^1.4.41", @@ -3513,6 +3515,15 @@ "node": ">=4" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -4441,6 +4452,19 @@ "node": ">=0.10.0" } }, + "node_modules/react-day-picker": { + "version": "8.10.1", + "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-8.10.1.tgz", + "integrity": "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==", + "funding": { + "type": "individual", + "url": "https://github.com/sponsors/gpbl" + }, + "peerDependencies": { + "date-fns": "^2.28.0 || ^3.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/scheduler_app/package.json b/scheduler_app/package.json index 05ec409..d89accc 100644 --- a/scheduler_app/package.json +++ b/scheduler_app/package.json @@ -14,11 +14,13 @@ "@radix-ui/react-slot": "^1.0.2", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", + "date-fns": "^3.6.0", "firebase": "^10.11.0", "lucide-react": "^0.373.0", "next": "14.2.3", "next-themes": "^0.3.0", "react": "^18", + "react-day-picker": "^8.10.1", "react-dom": "^18", "react-icons": "^5.1.0", "sonner": "^1.4.41",