├── .gitignore
├── README.md
├── app
    ├── (route)
    │   ├── details
    │   │   ├── [recordId]
    │   │   │   └── page.js
    │   │   └── _components
    │   │   │   ├── BookAppointment.jsx
    │   │   │   ├── DoctorDetail.jsx
    │   │   │   └── DoctorSuggestionList.jsx
    │   ├── my-booking
    │   │   ├── _components
    │   │   │   ├── BookingList.jsx
    │   │   │   └── CancelAppointment.jsx
    │   │   └── page.jsx
    │   └── search
    │   │   ├── [cname]
    │   │       └── page.js
    │   │   ├── _components
    │   │       └── CategoryList.jsx
    │   │   └── layout.js
    ├── _components
    │   ├── CategorySearch.jsx
    │   ├── DoctorList.jsx
    │   ├── Footer.jsx
    │   ├── Header.jsx
    │   └── Hero.jsx
    ├── _utils
    │   └── GlobalApi.jsx
    ├── api
    │   ├── auth
    │   │   └── [kindeAuth]
    │   │   │   └── route.js
    │   └── sendEmail
    │   │   └── route.js
    ├── favicon.ico
    ├── globals.css
    ├── layout.js
    └── page.js
├── components.json
├── components
    └── ui
    │   ├── alert-dialog.jsx
    │   ├── button.jsx
    │   ├── calendar.jsx
    │   ├── command.jsx
    │   ├── dialog.jsx
    │   ├── input.jsx
    │   ├── popover.jsx
    │   ├── sonner.jsx
    │   ├── tabs.jsx
    │   └── textarea.jsx
├── emails
    └── index.jsx
├── jsconfig.json
├── lib
    └── utils.js
├── middleware.js
├── next.config.mjs
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── doctors.jpg
    ├── facebook.png
    ├── linkedin.png
    ├── logo.svg
    ├── next.svg
    ├── twitter.png
    ├── vercel.svg
    └── youtube.png
└── tailwind.config.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | ![Build   Deploy Full Stack NextJs Appointment Booking App Using ReactJs](https://github.com/rrs301/Doctor-Appointment-Booking-Web-Nextjs/assets/20216436/17bce550-ef15-4ca1-bb98-ce8186f82d49)
 3 | 
 4 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 5 | 
 6 | ## Getting Started
 7 | 
 8 | First, run the development server:
 9 | 
10 | ```bash
11 | npm run dev
12 | # or
13 | yarn dev
14 | # or
15 | pnpm dev
16 | # or
17 | bun dev
18 | ```
19 | 
20 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
21 | 
22 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
23 | 
24 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
25 | 
26 | ## Learn More
27 | 
28 | To learn more about Next.js, take a look at the following resources:
29 | 
30 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
31 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
32 | 
33 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
34 | 
35 | ## Deploy on Vercel
36 | 
37 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
38 | 
39 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
40 | 


--------------------------------------------------------------------------------
/app/(route)/details/[recordId]/page.js:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import GlobalApi from '@/app/_utils/GlobalApi'
 3 | import React, { useEffect, useState } from 'react'
 4 | import DoctorDetail from '../_components/DoctorDetail';
 5 | import DoctorSuggestionList from '../_components/DoctorSuggestionList';
 6 | 
 7 | function Details({params}) {
 8 | 
 9 |   const [doctor,setDoctor]=useState();
10 |   useEffect(()=>{
11 |     getDoctorById();
12 |   },[])
13 |   const getDoctorById=()=>{
14 |     GlobalApi.getDoctorById(params.recordId).then(resp=>{
15 |       setDoctor(resp.data.data);
16 |     })
17 |   }
18 |   return (
19 |     <div className='p-5 md:px-10'>
20 |       <h2 className='font-bold text-[22px]'>Details</h2>
21 | 
22 |       <div className='grid grid-cols-1 lg:grid-cols-4 '>
23 |         {/* Doctor Detail  */}
24 |         <div className=' col-span-3'>
25 |         {doctor&& <DoctorDetail doctor={doctor} />}
26 |          
27 |         </div>
28 |         {/* Doctor Suggestion  */}
29 |         <div>
30 |           <DoctorSuggestionList/>
31 |         </div>
32 |       </div>
33 |     </div>
34 |   )
35 | }
36 | 
37 | export default Details


--------------------------------------------------------------------------------
/app/(route)/details/_components/BookAppointment.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from 'react'
  2 | import {
  3 |     Dialog,
  4 |     DialogClose,
  5 |     DialogContent,
  6 |     DialogDescription,
  7 |     DialogFooter,
  8 |     DialogHeader,
  9 |     DialogTitle,
 10 |     DialogTrigger,
 11 |   } from "@/components/ui/dialog"
 12 | import { Button } from '@/components/ui/button'
 13 | import { Calendar } from "@/components/ui/calendar"
 14 | import { CalendarDays, Clock } from 'lucide-react'
 15 | import { Textarea } from '@/components/ui/textarea'
 16 | import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
 17 | import GlobalApi from '@/app/_utils/GlobalApi'
 18 | import { toast } from 'sonner'
 19 | 
 20 | function BookAppointment({doctor}) {
 21 |     const [date, setDate]=useState(new Date());
 22 |     const [timeSlot,setTimeSlot]=useState();
 23 |     const [selectedTimeSlot,setSelectedTimeSlot]=useState();
 24 |     const [note,setNote]=useState();
 25 |     const {user}=useKindeBrowserClient();
 26 |     useEffect(()=>{
 27 |       getTime();
 28 |     },[])
 29 | 
 30 |     const getTime = () => {
 31 |       const timeList = [];
 32 |       for (let i = 10; i <= 12; i++) {
 33 |           timeList.push({
 34 |               time: i + ':00 AM'
 35 |           })
 36 |           timeList.push({
 37 |               time: i + ':30 AM'
 38 |           })
 39 |       }
 40 |       for (let i = 1; i <= 6; i++) {
 41 |           timeList.push({
 42 |               time: i + ':00 PM'
 43 |           })
 44 |           timeList.push({
 45 |               time: i + ':30 PM'
 46 |           })
 47 |       }
 48 | 
 49 |       setTimeSlot(timeList)
 50 |     }
 51 | 
 52 |     const saveBooking=()=>{
 53 |       const data={
 54 |         data:{
 55 |           UserName:user.given_name+" "+user.family_name,
 56 |           Email:user.email,
 57 |           Time:selectedTimeSlot,
 58 |           Date:date,
 59 |           doctor:doctor.id,
 60 |           Note:note
 61 |         }
 62 |       }
 63 |       // console.log(data)
 64 |       GlobalApi.bookAppointment(data).then(resp=>{
 65 |         console.log(resp);
 66 |         if(resp)
 67 |         {
 68 |           GlobalApi.sendEmail(data).then(resp=>{
 69 |             console.log(resp)
 70 |           })
 71 |           toast("Booking Confirmation sent on Email")
 72 |         }
 73 |       })
 74 |     }
 75 | 
 76 |   const isPastDay=(day)=>{
 77 |     return day<=new Date();
 78 |   }
 79 |   return (
 80 | <Dialog>
 81 |   <DialogTrigger>
 82 |   <Button className="mt-3 rounded-full">Book Appointment</Button>
 83 | 
 84 |   </DialogTrigger>
 85 |   <DialogContent>
 86 |     <DialogHeader>
 87 |       <DialogTitle>Book Appointment</DialogTitle>
 88 |       <DialogDescription>
 89 |             <div>
 90 |                 <div className='grid grid-cols-1 md:grid-cols-2 mt-5'>
 91 |                     {/* Calender  */}
 92 |                     <div className='flex flex-col   gap-3 items-baseline'>
 93 |                       <h2 className='flex gap-2 items-center'>
 94 |                         <CalendarDays className='text-primary h-5 w-5'/>
 95 |                         Select Date
 96 |                       </h2>
 97 |                     <Calendar
 98 |                         mode="single"
 99 |                         selected={date}
100 |                         onSelect={setDate}
101 |                         disabled={isPastDay}
102 |                         className="rounded-md border"
103 |                     />
104 |                     </div>
105 |                     {/* Time Slot  */}
106 |                     <div className=' mt-3 md:mt-0'>
107 |                         <h2 className='flex gap-2 items-center mb-3'>
108 |                           <Clock className='text-primary h-5 w-5'/>
109 |                           Select Time Slot
110 |                         </h2>
111 |                         <div className='grid grid-cols-3 gap-2 border 
112 |                         rounded-lg p-5'>
113 |                           {timeSlot?.map((item,index)=>(
114 |                             <h2 
115 |                             onClick={()=>setSelectedTimeSlot(item.time)}
116 |                             className={`p-2 border cursor-pointer
117 |                             text-center hover:bg-primary hover:text-white
118 |                             rounded-full
119 |                             ${item.time==selectedTimeSlot&&'bg-primary text-white'}`}>{item.time}</h2>
120 |                           ))}
121 |                         </div>
122 |                     </div>
123 |                 </div>
124 |                 <Textarea className="mt-3" placeholder="Note" onChange={(e)=>setNote(e.target.value)} />
125 |             </div>
126 |       </DialogDescription>
127 |     </DialogHeader>
128 |     <DialogFooter className="sm:justify-end">
129 |           <DialogClose asChild >
130 |             <>
131 |             <Button type="button" 
132 |             className="text-red-500 border-red-500"
133 |             variant="outline">
134 |               Close
135 |             </Button>
136 |             <Button type="button" disabled={!(date&&selectedTimeSlot)}
137 |             onClick={()=>saveBooking()}
138 |             >
139 |               Submit
140 |             </Button>
141 |             </>
142 |           </DialogClose>
143 |         </DialogFooter>
144 |   </DialogContent>
145 | </Dialog>
146 | 
147 |   )
148 | }
149 | 
150 | export default BookAppointment


--------------------------------------------------------------------------------
/app/(route)/details/_components/DoctorDetail.jsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '@/components/ui/button'
 2 | import { GraduationCap, MapPin } from 'lucide-react'
 3 | import Image from 'next/image'
 4 | import React from 'react'
 5 | import BookAppointment from './BookAppointment'
 6 | 
 7 | function DoctorDetail({doctor}) {
 8 |     const socialMediaList=[
 9 |         {
10 |             id:1,
11 |             icon:'/youtube.png',
12 |             url:''
13 |         },
14 |         {
15 |             id:2,
16 |             icon:'/linkedin.png',
17 |             url:''
18 |         },
19 |         {
20 |             id:3,
21 |             icon:'/twitter.png',
22 |             url:''
23 |         },
24 |         {
25 |             id:4,
26 |             icon:'/facebook.png',
27 |             url:''
28 |         }
29 |     ]
30 |   return (
31 |     <>
32 |     <div className='grid grid-cols-1 md:grid-cols-3 border-[1px] p-5 mt-5 rounded-lg'>
33 |           {/* Doctor Image  */}
34 |           <div>
35 |               <Image src={doctor.attributes?.image?.data?.attributes?.url}
36 |               width={200}
37 |               height={200}
38 |               alt='doctor-image'
39 |               className='rounded-lg w-full h-[280px] object-cover'
40 |               />
41 |           </div>
42 |           {/* Doctor Info  */}
43 |           <div className='col-span-2 mt-5 flex md:px-10 flex-col gap-3 items-baseline'>
44 |                 <h2 className='font-bold text-2xl'>{doctor.attributes?.Name}</h2>
45 |                 <h2 className='flex gap-2 text-gray-500 text-md'>
46 |                     <GraduationCap/>
47 |                     <span>{doctor.attributes?.Year_of_Experience} of Experince</span>
48 |                 </h2>
49 |                 <h2 className='text-md flex gap-2 text-gray-500'>
50 |                     <MapPin/>
51 |                     <span>{doctor.attributes.Address}</span>
52 |                 </h2>
53 |                 <h2 className='text-[10px] bg-blue-100 p-1 rounded-full
54 |                         px-2 text-primary'>{doctor.attributes?.categories.data[0].attributes?.Name}</h2>
55 | 
56 |                 <div className='flex gap-3'>
57 |                     {socialMediaList.map((item,index)=>(
58 |                         <Image src={item.icon} key={index}
59 |                         width={30}
60 |                         height={30}
61 |                         />
62 |                     ))}
63 |                 </div>
64 |                 <BookAppointment doctor={doctor} />
65 |           </div>
66 | 
67 |           {/* About Doctor  */}
68 | 
69 |          
70 |         </div>
71 |          <div className='p-3 border-[1px] rounded-lg mt-5'>
72 |          <h2 className='font-bold text-[20px]'>About Me</h2>
73 |          <p className='text-gray-500 tracking-wide mt-2'>{doctor.attributes.About}</p>
74 |        </div>
75 |        </>
76 |   )
77 | }
78 | 
79 | export default DoctorDetail


--------------------------------------------------------------------------------
/app/(route)/details/_components/DoctorSuggestionList.jsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import GlobalApi from '@/app/_utils/GlobalApi';
 3 | import Image from 'next/image';
 4 | import Link from 'next/link';
 5 | import React, { useEffect, useState } from 'react'
 6 | 
 7 | function DoctorSuggestionList() {
 8 |     const [doctorList,setDoctorList]=useState([]);
 9 |     useEffect(()=>{
10 |       getDoctorList();
11 |     },[])
12 |     const getDoctorList=()=>{
13 |       GlobalApi.getDoctorList().then(resp=>{
14 |         console.log(resp.data.data);
15 |         setDoctorList(resp.data.data);
16 |       })
17 |     }
18 |   return (
19 |     <div className=' p-4 border-[1px] mt-5 md:ml-5 rounded-lg '>
20 |         <h2 className='mb-3 font-bold'>Suggestions</h2>
21 | 
22 |         {doctorList.map((doctor,index)=>(
23 |             <Link href={'/details/'+doctor.id} className=' mb-4 p-3 shadow-sm w-full 
24 |             cursor-pointer hover:bg-slate-100
25 |             rounded-lg flex items-center gap-3'>
26 |                 <Image src={doctor.attributes?.image?.data?.attributes?.url}
27 |                 width={70}
28 |                 height={70}
29 |                 className='w-[70px] h-[70px] rounded-full object-cover'
30 |                 />
31 |                 <div className='mt-3 flex-col flex gap-1 items-baseline'>
32 |                     <h2 className='text-[10px] bg-blue-100 p-1 rounded-full px-2
33 |                      text-primary'>{doctor.attributes.categories?.data[0]?.attributes?.Name}</h2>
34 |                 <h2 className='font-medium text-sm'>{doctor.attributes.Name}</h2>
35 |                 <h2 className='text-primary text-xs flex gap-2'>
36 |                     {/* <GraduationCap/> */}
37 |                     {doctor.attributes.Year_of_Experience}</h2>
38 |                     </div>
39 |             </Link>
40 |         ))}
41 |     </div>
42 |   )
43 | }
44 | 
45 | export default DoctorSuggestionList


--------------------------------------------------------------------------------
/app/(route)/my-booking/_components/BookingList.jsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '@/components/ui/button'
 2 | import { Calendar, Clock, MapPin } from 'lucide-react'
 3 | import moment from 'moment'
 4 | import Image from 'next/image'
 5 | import React from 'react'
 6 | import CancelAppointment from './CancelAppointment'
 7 | import GlobalApi from '@/app/_utils/GlobalApi'
 8 | import { toast } from 'sonner'
 9 | 
10 | function BookingList({bookingList,expired,updateRecord}) {
11 |   
12 |   const onDeleteBooking=(item)=>{
13 |     console.log(item)
14 |     GlobalApi.deleteBooking(item.id).then(resp=>{
15 |       console.log(resp);
16 |       if(resp)
17 |       {
18 |         toast('Booking Delete Successfully!');
19 |         updateRecord()
20 |       }
21 |     })
22 |   }
23 |   return (
24 |     <div>
25 |         {bookingList.length>0?bookingList.map((item,index)=>(
26 |             <div className=' flex gap-4 items-center border p-5 m-3 rounded-lg'>
27 |                 <Image src={item.attributes.doctor.data.attributes?.image?.data?.attributes?.url}
28 |                 className='rounded-full h-[70px] w-[70px] object-cover'
29 |                 width={70}
30 |                 height={70}
31 |                 alt='doctor-image'
32 |                 />
33 |                 <div className='flex flex-col gap-2 w-full'>
34 |                     <h2 className='font-bold text-[18px] items-center flex justify-between'>{item.attributes.doctor.data.attributes.Name}
35 |                     {!expired&&<CancelAppointment onContinueClick={()=>onDeleteBooking(item)}/>}
36 |                     </h2>
37 |                     <h2 className='flex gap-2 text-gray-500'> <MapPin className='text-primary h-5 w-5'/> 
38 |                     {item.attributes.doctor.data.attributes.Address}</h2>
39 |                     <h2 className='flex gap-2'><Calendar className='text-primary h-5 w-5'/> Appointment On:
40 |                      { moment(item.attributes.Date).format('DD-MMM-YYYY')} </h2>
41 |                      <h2 className='flex gap-2'><Clock className='text-primary h-5 w-5'/> At Time : {item.attributes.Time} </h2>
42 |                 </div>
43 |             </div>
44 |         ))
45 |           :
46 |           <div className='h-[150px] w-full bg-slate-100 animate-pulse rounded-lg'>
47 |           </div>
48 |       }
49 |     </div>
50 |   )
51 | }
52 | 
53 | export default BookingList


--------------------------------------------------------------------------------
/app/(route)/my-booking/_components/CancelAppointment.jsx:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import {
 3 |     AlertDialog,
 4 |     AlertDialogAction,
 5 |     AlertDialogCancel,
 6 |     AlertDialogContent,
 7 |     AlertDialogDescription,
 8 |     AlertDialogFooter,
 9 |     AlertDialogHeader,
10 |     AlertDialogTitle,
11 |     AlertDialogTrigger,
12 |   } from "@/components/ui/alert-dialog"
13 | import { Button } from '@/components/ui/button'
14 |   
15 | function CancelAppointment({onContinueClick}) {
16 | 
17 |     
18 |   return (
19 |     <AlertDialog>
20 |     <AlertDialogTrigger>
21 |     <Button variant="outline" className="text-primary border-primary">Cancel Appointment</Button>
22 |     </AlertDialogTrigger>
23 |     <AlertDialogContent>
24 |       <AlertDialogHeader>
25 |         <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
26 |         <AlertDialogDescription>
27 |           This action cannot be undone. This will permanently delete your appointment
28 |           and remove your data from our servers.
29 |         </AlertDialogDescription>
30 |       </AlertDialogHeader>
31 |       <AlertDialogFooter>
32 |         <AlertDialogCancel>Cancel</AlertDialogCancel>
33 |         <AlertDialogAction onClick={()=>onContinueClick()}>Continue</AlertDialogAction>
34 |       </AlertDialogFooter>
35 |     </AlertDialogContent>
36 |   </AlertDialog>
37 |   
38 |   )
39 | }
40 | 
41 | export default CancelAppointment


--------------------------------------------------------------------------------
/app/(route)/my-booking/page.jsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import React, { useEffect, useState } from 'react'
 3 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 4 | import BookingList from './_components/BookingList'
 5 | import GlobalApi from '@/app/_utils/GlobalApi'
 6 | import { useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
 7 | 
 8 | function MyBooking() {
 9 | 
10 |     const {user}=useKindeBrowserClient();
11 |     const [bookingList,setBookingList]=useState([]);
12 |     useEffect(()=>{
13 |         user&&getUserBookingList();
14 |     },[user])
15 |     const getUserBookingList=()=>{
16 |         GlobalApi.getUserBookingList(user?.email).then(resp=>{
17 |             console.log(resp.data.data)
18 |             setBookingList(resp.data.data);
19 |         })
20 |     }
21 | 
22 |     /**
23 |      * Used to Filter User Booking
24 |      * @param {} type 
25 |      * @returns 
26 |      */
27 |     const filterUserBooking=(type)=>{
28 |         const result=bookingList.filter(item=>
29 |            type=='upcoming'? new Date(item.attributes.Date)>=new Date()
30 |            :new Date(item.attributes.Date)<=new Date()
31 |             )
32 |             console.log(result)
33 |         return result;
34 |     }
35 |   return (
36 |     <div className='px-4 sm:px-10 mt-10'>
37 |         <h2 className='font-bold text-2xl'>My Booking</h2>
38 |         <Tabs defaultValue="upcoming" className="w-full mt-5">
39 |             <TabsList className="w-full justify-start">
40 |                 <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
41 |                 <TabsTrigger value="expired">Expired</TabsTrigger>
42 |             </TabsList>
43 |             <TabsContent value="upcoming">
44 |                 <BookingList 
45 |                 bookingList={filterUserBooking('upcoming')}
46 |                 updateRecord={()=>getUserBookingList()}
47 |                 expired={false}
48 |                 />
49 |             </TabsContent>
50 |             <TabsContent value="expired">
51 |                 <BookingList bookingList={filterUserBooking('expired')}
52 |                 updateRecord={()=>getUserBookingList()}
53 |                 expired={true}
54 |                 />
55 |             </TabsContent>
56 |             </Tabs>
57 | 
58 |     </div>
59 |   )
60 | }
61 | 
62 | export default MyBooking


--------------------------------------------------------------------------------
/app/(route)/search/[cname]/page.js:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import DoctorList from '@/app/_components/DoctorList';
 3 | import GlobalApi from '@/app/_utils/GlobalApi'
 4 | import React, { useEffect, useState } from 'react'
 5 | 
 6 | function Search({params}) {
 7 | 
 8 |   const [doctorList,setDoctorList]=useState([]);
 9 |   useEffect(()=>{
10 |     console.log(params.cname);
11 |     getDoctors();
12 |   },[])
13 | 
14 |   const getDoctors=()=>{
15 |     GlobalApi.getDoctorByCategory(params.cname).then(resp=>{
16 |       setDoctorList(resp.data.data);
17 |     })
18 |   }
19 |   return (
20 |     <div className='mt-5'>
21 |         <DoctorList heading={params.cname}
22 |         doctorList={doctorList}
23 |         />
24 |     </div>
25 |   )
26 | }
27 | 
28 | export default Search


--------------------------------------------------------------------------------
/app/(route)/search/_components/CategoryList.jsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import GlobalApi from '@/app/_utils/GlobalApi';
 3 | import React, { useEffect, useState } from 'react'
 4 | import {
 5 |     Command,
 6 |     CommandDialog,
 7 |     CommandEmpty,
 8 |     CommandGroup,
 9 |     CommandInput,
10 |     CommandItem,
11 |     CommandList,
12 |     CommandSeparator,
13 |     CommandShortcut,
14 |   } from "@/components/ui/command"
15 | import Link from 'next/link';
16 | import Image from 'next/image';
17 | import { usePathname } from 'next/navigation';
18 | function CategoryList() {
19 |     const [categoryList,setCategoryList]=useState([]);
20 |     const params=usePathname();
21 |     const category=params.split('/')[2];
22 |     useEffect(()=>{
23 |     getCategoryList();
24 |         
25 |   },[])
26 | 
27 |   const getCategoryList=()=>{
28 |     GlobalApi.getCategory().then(resp=>{
29 |       console.log(resp.data.data);
30 |       setCategoryList(resp.data.data);
31 |     })
32 |   }
33 |   return (
34 |     <div className='h-screen fixed mt-5 flex flex-col'>
35 |         <Command >
36 |   <CommandInput placeholder="Type a command or search..." />
37 |   <CommandList className="overflow-visible">
38 |     <CommandEmpty>No results found.</CommandEmpty>
39 |     <CommandGroup heading="Suggestions" >
40 |         {categoryList&&categoryList.map((item,index)=>(
41 |             <CommandItem key={index}>
42 |                 <Link href={'/search/'+item?.attributes?.Name}
43 |                 className={`p-2 flex gap-2
44 |                 text-[14px]
45 |                 text-blue-600
46 |                 items-center
47 |                 rounded-md cursor-pointer w-full
48 |                 ${category==item.attributes.Name&&'bg-blue-100'}
49 |                 `}>
50 |                     <Image src={item.attributes?.Icon?.data.attributes?.url}
51 |                     alt='icon'
52 |                     width={25}
53 |                     height={25}/>
54 |                     <label>{item.attributes.Name}</label>
55 |                 </Link>
56 |             </CommandItem>
57 |         ))}
58 |       
59 |      
60 |     </CommandGroup>
61 |    
62 |   </CommandList>
63 | </Command>
64 |     </div>
65 |   )
66 | }
67 | 
68 | export default CategoryList


--------------------------------------------------------------------------------
/app/(route)/search/layout.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import CategoryList from './_components/CategoryList'
 3 | 
 4 | function layout({children}) {
 5 |   return (
 6 |     <div className='grid grid-cols-4'>
 7 |       <div className='hidden md:block'>
 8 |         {/* Category  */}
 9 |         <CategoryList />
10 |       </div>
11 |       <div className='col-span-4 md:col-span-3'>
12 |        {children}
13 |       </div>
14 |       
15 |     </div>
16 |   )
17 | }
18 | 
19 | export default layout


--------------------------------------------------------------------------------
/app/_components/CategorySearch.jsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { Button } from '@/components/ui/button'
 3 | import { Input } from '@/components/ui/input'
 4 | import { Search } from 'lucide-react'
 5 | import React, { useEffect, useState } from 'react'
 6 | import GlobalApi from '../_utils/GlobalApi'
 7 | import Image from 'next/image'
 8 | import Link from 'next/link'
 9 | 
10 | function CategorySearch() {
11 | 
12 |   const [categoryList,setCategoryList]=useState([]);
13 |   useEffect(()=>{
14 |     getCategoryList()
15 |   },[])
16 | 
17 |   const getCategoryList=()=>{
18 |     GlobalApi.getCategory().then(resp=>{
19 |       console.log(resp.data.data);
20 |       setCategoryList(resp.data.data);
21 |     })
22 |   }
23 |   return (
24 |     <div className='mb-10 items-center px-5 flex flex-col gap-2'>
25 |         <h2 className='font-bold
26 |         text-4xl tracking-wide'>
27 |             Search <span className='text-primary'>Doctors</span></h2>
28 |         <h2 className='text-gray-500 text-xl'>Search Your Doctor and Book Appointment in one click</h2>
29 | 
30 |         <div className="flex w-full mt-3 max-w-sm items-center space-x-2">
31 |       <Input type="text" placeholder="Search..." />
32 |       <Button type="submit">
33 |         <Search className='h-4 w-4 mr-2'/>
34 |         Search</Button>
35 |     </div>
36 |         
37 |         {/* Display List of Category  */}
38 |         <div className='grid grid-cols-3 mt-5 md:grid-cols-4 lg:grid-cols-6 '>
39 |         {categoryList.length>0?categoryList.map((item,index)=>index<6&&(
40 |           <Link href={'/search/'+item.attributes.Name} key={index} className='flex 
41 |           flex-col text-center items-center
42 |           p-5 bg-blue-50 m-2 rounded-lg cursor-pointer
43 |           gap-2 hover:scale-110 transition-all ease-in-out'>
44 |             <Image src={item.attributes?.Icon?.data.attributes?.url}
45 |             alt='icon'
46 |             width={40}
47 |             height={40}/>
48 |             <label className='text-blue-600 text-sm'>{item?.attributes?.Name}</label>
49 |           </Link>
50 |         ))
51 |       :
52 |       [1,2,3,4,5,6].map((item,index)=>(
53 |         <div className=' bg-slate-200 m-2
54 |        w-[130px] h-[120px] rounded-lg animate-pulse'>
55 |             
56 |         </div>
57 |     ))
58 |      
59 |       }
60 |         </div>
61 |     </div>
62 |   )
63 | }
64 | 
65 | export default CategorySearch


--------------------------------------------------------------------------------
/app/_components/DoctorList.jsx:
--------------------------------------------------------------------------------
 1 | import Image from 'next/image'
 2 | import Link from 'next/link'
 3 | import React from 'react'
 4 | 
 5 | function DoctorList({doctorList,heading='Popular Doctors'}) {
 6 |   return (
 7 |     <div className='mb-10 px-8'>
 8 |         <h2 className='font-bold text-xl'>
 9 |             {heading}</h2>
10 | 
11 |         <div className='grid grid-cols-2 
12 |         sm:grid-cols-2 md:grid-cols-3
13 |         gap-7 mt-4
14 |          lg:grid-cols-4'>
15 |             {doctorList.length>0?doctorList.map((doctor,index)=>(
16 |                 <div className='border-[1px] rounded-lg p-3
17 |                 cursor-pointer hover:border-primary
18 |                 hover:shadow-sm transition-all ease-in-out'
19 |                 key={index}>
20 |                     <Image src={doctor.attributes?.image?.data?.attributes?.url}
21 |                     alt='doctor'
22 |                     width={500}
23 |                     height={200}
24 |                     className='h-[200px] w-full object-cover rounded-lg'
25 |                     />
26 |                     <div className='mt-3 items-baseline flex flex-col gap-1'>
27 |                         <h2 className='text-[10px] bg-blue-100 p-1 rounded-full
28 |                         px-2 text-primary'>{doctor.attributes?.categories.data[0].attributes?.Name}</h2>
29 |                         <h2 className='font-bold'>{doctor.attributes.Name}</h2>
30 |                         <h2 className='text-primary text-sm'>{doctor.attributes?.Year_of_Experience}</h2>
31 |                         <h2 className='text-gray-500 text-sm'>{doctor.attributes?.Address}</h2>
32 |                         <Link href={'/details/'+doctor?.id} className='w-full'>
33 |                         <h2 className='p-2 px-3 border-[1px] border-primary
34 |                         text-primary rounded-full w-full text-center
35 |                         text-[11px] mt-2
36 |                         cursor-pointer 
37 |                         hover:bg-primary hover:text-white'>Book Now</h2>
38 |                         </Link>
39 |                     </div>
40 |                 </div>
41 |             ))
42 |         :
43 |         // Skelton Effect 
44 |         [1,2,3,4,5,6].map((item,index)=>(
45 |             <div className='h-[220px] bg-slate-200 
46 |             w-full rounded-lg animate-pulse'>
47 | 
48 |             </div>
49 |         ))
50 |        
51 |         }
52 |         </div>
53 |     </div>
54 |   )
55 | }
56 | 
57 | export default DoctorList


--------------------------------------------------------------------------------
/app/_components/Footer.jsx:
--------------------------------------------------------------------------------
  1 | import Image from 'next/image'
  2 | import React from 'react'
  3 | 
  4 | function Footer() {
  5 |   return (
  6 |     <footer className="bg-gray-100">
  7 |     <div className="mx-auto max-w-5xl justify-center text-center flex flex-col items-center px-4 py-16 sm:px-6 lg:px-8">
  8 |      <Image src='/logo.svg'
  9 |      alt='logo'
 10 |      width={200}
 11 |      height={100}
 12 |      />
 13 |   
 14 |       <p className="mx-auto mt-6 max-w-md text-center leading-relaxed text-gray-500">
 15 |         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Incidunt consequuntur amet culpa cum
 16 |         itaque neque.
 17 |       </p>
 18 |   
 19 |       <ul className="mt-12 flex flex-wrap justify-center gap-6 md:gap-8 lg:gap-12">
 20 |         <li>
 21 |           <a className="text-gray-700 transition hover:text-gray-700/75" href="#"> About </a>
 22 |         </li>
 23 |   
 24 |         <li>
 25 |           <a className="text-gray-700 transition hover:text-gray-700/75" href="#"> Careers </a>
 26 |         </li>
 27 |   
 28 |         <li>
 29 |           <a className="text-gray-700 transition hover:text-gray-700/75" href="#"> History </a>
 30 |         </li>
 31 |   
 32 |         <li>
 33 |           <a className="text-gray-700 transition hover:text-gray-700/75" href="#"> Services </a>
 34 |         </li>
 35 |   
 36 |         <li>
 37 |           <a className="text-gray-700 transition hover:text-gray-700/75" href="#"> Projects </a>
 38 |         </li>
 39 |   
 40 |         <li>
 41 |           <a className="text-gray-700 transition hover:text-gray-700/75" href="#"> Blog </a>
 42 |         </li>
 43 |       </ul>
 44 |   
 45 |       <ul className="mt-12 flex justify-center gap-6 md:gap-8">
 46 |         <li>
 47 |           <a
 48 |             href="#"
 49 |             rel="noreferrer"
 50 |             target="_blank"
 51 |             className="text-gray-700 transition hover:text-gray-700/75"
 52 |           >
 53 |             <span className="sr-only">Facebook</span>
 54 |             <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 55 |               <path
 56 |                 fillRule="evenodd"
 57 |                 d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
 58 |                 clipRule="evenodd"
 59 |               />
 60 |             </svg>
 61 |           </a>
 62 |         </li>
 63 |   
 64 |         <li>
 65 |           <a
 66 |             href="#"
 67 |             rel="noreferrer"
 68 |             target="_blank"
 69 |             className="text-gray-700 transition hover:text-gray-700/75"
 70 |           >
 71 |             <span className="sr-only">Instagram</span>
 72 |             <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 73 |               <path
 74 |                 fillRule="evenodd"
 75 |                 d="M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z"
 76 |                 clipRule="evenodd"
 77 |               />
 78 |             </svg>
 79 |           </a>
 80 |         </li>
 81 |   
 82 |         <li>
 83 |           <a
 84 |             href="#"
 85 |             rel="noreferrer"
 86 |             target="_blank"
 87 |             className="text-gray-700 transition hover:text-gray-700/75"
 88 |           >
 89 |             <span className="sr-only">Twitter</span>
 90 |             <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
 91 |               <path
 92 |                 d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84"
 93 |               />
 94 |             </svg>
 95 |           </a>
 96 |         </li>
 97 |   
 98 |         <li>
 99 |           <a
100 |             href="#"
101 |             rel="noreferrer"
102 |             target="_blank"
103 |             className="text-gray-700 transition hover:text-gray-700/75"
104 |           >
105 |             <span className="sr-only">GitHub</span>
106 |             <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
107 |               <path
108 |                 fillRule="evenodd"
109 |                 d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
110 |                 clipRule="evenodd"
111 |               />
112 |             </svg>
113 |           </a>
114 |         </li>
115 |   
116 |         <li>
117 |           <a
118 |             href="#"
119 |             rel="noreferrer"
120 |             target="_blank"
121 |             className="text-gray-700 transition hover:text-gray-700/75"
122 |           >
123 |             <span className="sr-only">Dribbble</span>
124 |             <svg className="h-6 w-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
125 |               <path
126 |                 fillRule="evenodd"
127 |                 d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10c5.51 0 10-4.48 10-10S17.51 2 12 2zm6.605 4.61a8.502 8.502 0 011.93 5.314c-.281-.054-3.101-.629-5.943-.271-.065-.141-.12-.293-.184-.445a25.416 25.416 0 00-.564-1.236c3.145-1.28 4.577-3.124 4.761-3.362zM12 3.475c2.17 0 4.154.813 5.662 2.148-.152.216-1.443 1.941-4.48 3.08-1.399-2.57-2.95-4.675-3.189-5A8.687 8.687 0 0112 3.475zm-3.633.803a53.896 53.896 0 013.167 4.935c-3.992 1.063-7.517 1.04-7.896 1.04a8.581 8.581 0 014.729-5.975zM3.453 12.01v-.26c.37.01 4.512.065 8.775-1.215.25.477.477.965.694 1.453-.109.033-.228.065-.336.098-4.404 1.42-6.747 5.303-6.942 5.629a8.522 8.522 0 01-2.19-5.705zM12 20.547a8.482 8.482 0 01-5.239-1.8c.152-.315 1.888-3.656 6.703-5.337.022-.01.033-.01.054-.022a35.318 35.318 0 011.823 6.475 8.4 8.4 0 01-3.341.684zm4.761-1.465c-.086-.52-.542-3.015-1.659-6.084 2.679-.423 5.022.271 5.314.369a8.468 8.468 0 01-3.655 5.715z"
128 |                 clipRule="evenodd"
129 |               />
130 |             </svg>
131 |           </a>
132 |         </li>
133 |       </ul>
134 |     </div>
135 |   </footer>
136 |   )
137 | }
138 | 
139 | export default Footer


--------------------------------------------------------------------------------
/app/_components/Header.jsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { Button } from '@/components/ui/button'
 3 | import { LoginLink, LogoutLink, useKindeBrowserClient } from '@kinde-oss/kinde-auth-nextjs'
 4 | import Image from 'next/image'
 5 | import Link from 'next/link'
 6 | import React, { useEffect } from 'react'
 7 | import {
 8 |     Popover,
 9 |     PopoverContent,
10 |     PopoverTrigger,
11 |   } from "@/components/ui/popover"
12 |   
13 | 
14 | function Header() {
15 |     const Menu=[
16 |         {
17 |             id:1,
18 |             name:'Home',
19 |             path:'/'
20 |         },
21 |         {
22 |             id:2,
23 |             name:'Explore',
24 |             path:'/explore'
25 |         },
26 |         {
27 |             id:3,
28 |             name:'Contact Us',
29 |             path:'/'
30 |         },
31 |     ]
32 | 
33 |     const {user} = useKindeBrowserClient();
34 | 
35 |     useEffect(()=>{
36 |         console.log(user);
37 |     },[user])
38 |   return (
39 |     <div className='flex items-center 
40 |     justify-between p-4 shadow-sm'>
41 |         <div className='flex items-center gap-10'>
42 |             <Image src='/logo.svg' alt='logo'
43 |             width={180} height={80}
44 |             />
45 |             <ul className='md:flex gap-8 hidden'>
46 |                 {Menu.map((item,index)=>(
47 |                     <Link href={item.path} key={index}>
48 |                     <li className='hover:text-primary
49 |                     cursor-pointer hover:scale-105
50 |                     transition-all ease-in-out'>{item.name}</li>
51 |                     </Link>
52 |                 ))}
53 |             </ul>
54 |         </div>
55 |    
56 |        {user?
57 |       
58 |        <Popover>
59 |         <PopoverTrigger>
60 |         {user?.picture? 
61 |         <Image src={user?.picture} alt='profile-image'
62 |         width={40}
63 |         height={40}
64 |         className='rounded-full' />:
65 |         <Image src={'https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_1280.png'} alt='profile-image'
66 |         width={40}
67 |         height={40}
68 |         className='rounded-full' />}
69 |         </PopoverTrigger>
70 |         <PopoverContent className="w-44">
71 |             <ul className='flex  flex-col gap-2'>
72 |            
73 |             <Link href={'/my-booking'} className='cursor-pointer
74 |              hover:bg-slate-100 p-2 rounded-md'>My Booking</Link>
75 |                 <li className='cursor-pointer
76 |              hover:bg-slate-100 p-2 rounded-md'>
77 |                 <LogoutLink> Logout </LogoutLink></li>
78 |             </ul>
79 |         </PopoverContent>
80 |         </Popover>
81 | 
82 |    
83 |        :
84 |         <LoginLink> <Button>Get Started</Button></LoginLink>
85 |        } 
86 |         
87 |     </div>
88 |   )
89 | }
90 | 
91 | export default Header


--------------------------------------------------------------------------------
/app/_components/Hero.jsx:
--------------------------------------------------------------------------------
 1 | import { Button } from '@/components/ui/button'
 2 | import Image from 'next/image'
 3 | import React from 'react'
 4 | 
 5 | function Hero() {
 6 |   return (
 7 |     <section>
 8 |   <div className="mx-auto max-w-screen-xl px-4 py-8 sm:px-6 sm:py-12 lg:px-8 lg:py-16">
 9 |     <div className="grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-16">
10 |       <div className="relative h-64 overflow-hidden rounded-lg sm:h-80 lg:order-last lg:h-full">
11 |         <Image
12 |           alt=""
13 |           src="/doctors.jpg"
14 |           width={800}
15 |           height={800}
16 |           className="absolute inset-0 h-full
17 |           rounded-3xl 
18 |           w-full object-cover"
19 |         />
20 |       </div>
21 | 
22 |       <div className="lg:py-24">
23 |         <h2 className="text-4xl font-bold sm:text-4xl">
24 |             Find & Book 
25 |             <span className='text-primary'> Appointment </span> 
26 |             with your Fav 
27 |             <span className='text-primary '> Doctors</span></h2>
28 | 
29 |         <p className="mt-4 text-gray-500">
30 |           Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut qui hic atque tenetur quis
31 |           eius quos ea neque sunt, accusantium soluta minus veniam tempora deserunt? Molestiae eius
32 |           quidem quam repellat.
33 |         </p>
34 | 
35 |         <Button className="mt-10">Explore Now</Button>
36 |       </div>
37 |     </div>
38 |   </div>
39 | </section>
40 |   )
41 | }
42 | 
43 | export default Hero


--------------------------------------------------------------------------------
/app/_utils/GlobalApi.jsx:
--------------------------------------------------------------------------------
 1 | const { default: axios } = require("axios");
 2 | 
 3 | 
 4 | const API_KEY=process.env.NEXT_PUBLIC_STRAPI_API_KEY;
 5 | 
 6 | const axiosClient=axios.create({
 7 |     baseURL:'https://appointment-booking-admin.onrender.com/api',
 8 |     headers:{
 9 |         'Authorization':`Bearer ${API_KEY}`
10 |     }
11 | })
12 | 
13 |  const getCategory=()=>axiosClient.get('/categories?populate=*');
14 | 
15 |  const getDoctorList=()=>axiosClient.get('/doctors?populate=*')
16 |  
17 |  const getDoctorByCategory=(category)=>axiosClient.get('/doctors?filters[categories][Name][$in]='+category+"&populate=*")
18 |  
19 |  const getDoctorById=(id)=>axiosClient.get('/doctors/'+id+"?populate=*")
20 | 
21 |  const bookAppointment=(data)=>axiosClient.post('/appointments',data);
22 |  
23 |     const getUserBookingList=(userEmail)=>axiosClient.get("/appointments?[filters][Email][$eq]="+userEmail+"&populate[doctor][populate][image][populate][0]=url&populate=*")
24 | 
25 |     const deleteBooking=(id)=>axiosClient.delete('/appointments/'+id)
26 |  
27 |     const sendEmail=(data)=>axios.post('/api/sendEmail',data);
28 |     export default{
29 |     getCategory,
30 |     getDoctorList,
31 |     getDoctorByCategory,
32 |     getDoctorById,
33 |     bookAppointment,
34 |     getUserBookingList,
35 |     deleteBooking,
36 |     sendEmail
37 | }


--------------------------------------------------------------------------------
/app/api/auth/[kindeAuth]/route.js:
--------------------------------------------------------------------------------
1 | import {handleAuth} from "@kinde-oss/kinde-auth-nextjs/server";
2 | 
3 | export const GET = handleAuth();


--------------------------------------------------------------------------------
/app/api/sendEmail/route.js:
--------------------------------------------------------------------------------
 1 | import { Resend } from 'resend';
 2 | import { NextResponse } from 'next/server';
 3 | import EmailTemplate from '@/emails';
 4 | 
 5 | const resend = new Resend(process.env.RESEND_API_KEY);
 6 | 
 7 | export async function POST(req){
 8 | 
 9 |     const response=await req.json()
10 |     const result=response.data;
11 |     try{
12 | 
13 |         const data=await resend.emails.send({
14 |             from: 'Doctor-Appointment-Booking@tubeguruji-app.tubeguruji.com',
15 |             to: [response.data.Email],
16 |             subject: 'Appointment Booking Confirmation',
17 |             react: EmailTemplate({result})
18 |           });
19 |         return NextResponse.json({data})
20 |     }
21 |     catch(error)
22 |     {
23 |         return NextResponse.json({error})
24 |     }
25 | }


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/Doctor-Appointment-Booking-Web-Nextjs/7980c8892b86c991ff3e005b651ac8f8380d44b1/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 |  
 5 | @layer base {
 6 |   :root {
 7 |     --background: 0 0% 100%;
 8 |     --foreground: 0 0% 3.9%;
 9 | 
10 |     --card: 0 0% 100%;
11 |     --card-foreground: 0 0% 3.9%;
12 |  
13 |     --popover: 0 0% 100%;
14 |     --popover-foreground: 0 0% 3.9%;
15 |  
16 |     --primary: 0 0% 9%;
17 |     --primary-foreground: 0 0% 98%;
18 |  
19 |     --secondary: 0 0% 96.1%;
20 |     --secondary-foreground: 0 0% 9%;
21 |  
22 |     --muted: 0 0% 96.1%;
23 |     --muted-foreground: 0 0% 45.1%;
24 |  
25 |     --accent: 0 0% 96.1%;
26 |     --accent-foreground: 0 0% 9%;
27 |  
28 |     --destructive: 0 84.2% 60.2%;
29 |     --destructive-foreground: 0 0% 98%;
30 | 
31 |     --border: 0 0% 89.8%;
32 |     --input: 0 0% 89.8%;
33 |     --ring: 0 0% 3.9%;
34 |  
35 |     --radius: 0.5rem;
36 |   }
37 |  
38 |   .dark {
39 |     --background: 0 0% 3.9%;
40 |     --foreground: 0 0% 98%;
41 |  
42 |     --card: 0 0% 3.9%;
43 |     --card-foreground: 0 0% 98%;
44 |  
45 |     --popover: 0 0% 3.9%;
46 |     --popover-foreground: 0 0% 98%;
47 |  
48 |     --primary: 0 0% 98%;
49 |     --primary-foreground: 0 0% 9%;
50 |  
51 |     --secondary: 0 0% 14.9%;
52 |     --secondary-foreground: 0 0% 98%;
53 |  
54 |     --muted: 0 0% 14.9%;
55 |     --muted-foreground: 0 0% 63.9%;
56 |  
57 |     --accent: 0 0% 14.9%;
58 |     --accent-foreground: 0 0% 98%;
59 |  
60 |     --destructive: 0 62.8% 30.6%;
61 |     --destructive-foreground: 0 0% 98%;
62 |  
63 |     --border: 0 0% 14.9%;
64 |     --input: 0 0% 14.9%;
65 |     --ring: 0 0% 83.1%;
66 |   }
67 | }
68 |  
69 | @layer base {
70 |   * {
71 |     @apply border-border;
72 |   }
73 |   body {
74 |     @apply bg-background text-foreground;
75 |   }
76 | }


--------------------------------------------------------------------------------
/app/layout.js:
--------------------------------------------------------------------------------
 1 | import { Outfit } from "next/font/google";
 2 | import "./globals.css";
 3 | import Header from "./_components/Header";
 4 | import Footer from "./_components/Footer";
 5 | import { Toaster } from "sonner";
 6 | 
 7 | const outfit = Outfit({ subsets: ["latin"] });
 8 | 
 9 | export const metadata = {
10 |   title: "Create Next App",
11 |   description: "Generated by create next app",
12 | };
13 | 
14 | export default function RootLayout({ children }) {
15 |   return (
16 |     <html lang="en">
17 |       <body className={outfit.className}>
18 |         <div className="md:px-20">
19 |           <Header/>
20 |           {children}
21 |           <Toaster />
22 |         </div>
23 |         {/* <Footer/> */}
24 |         </body>
25 |     </html>
26 |   );
27 | }
28 | 


--------------------------------------------------------------------------------
/app/page.js:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | import { Button } from "@/components/ui/button";
 3 | import Image from "next/image";
 4 | import Hero from "./_components/Hero";
 5 | import CategorySearch from "./_components/CategorySearch";
 6 | import DoctorList from "./_components/DoctorList";
 7 | import GlobalApi from "./_utils/GlobalApi";
 8 | import { useEffect, useState } from "react";
 9 | 
10 | export default function Home() {
11 | 
12 |   const [doctorList,setDoctorList]=useState([]);
13 |   useEffect(()=>{
14 |     getDoctorList();
15 |   },[])
16 |   const getDoctorList=()=>{
17 |     GlobalApi.getDoctorList().then(resp=>{
18 |       console.log(resp.data.data);
19 |       setDoctorList(resp.data.data);
20 |     })
21 |   }
22 |   return (
23 |     <div>
24 |         {/* Hero Section  */}
25 |         <Hero/>
26 | 
27 |         {/* Search bar + Categories  */}
28 |         <CategorySearch/>
29 | 
30 |         {/* Popular Doctor List  */}
31 |         <DoctorList doctorList={doctorList}/>
32 |     </div>
33 |   );
34 | }
35 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "default",
 4 |   "rsc": true,
 5 |   "tsx": false,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.js",
 8 |     "css": "app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils"
16 |   }
17 | }


--------------------------------------------------------------------------------
/components/ui/alert-dialog.jsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | 
  3 | import * as React from "react"
  4 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { buttonVariants } from "@/components/ui/button"
  8 | 
  9 | const AlertDialog = AlertDialogPrimitive.Root
 10 | 
 11 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 12 | 
 13 | const AlertDialogPortal = AlertDialogPrimitive.Portal
 14 | 
 15 | const AlertDialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
 16 |   <AlertDialogPrimitive.Overlay
 17 |     className={cn(
 18 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
 19 |       className
 20 |     )}
 21 |     {...props}
 22 |     ref={ref} />
 23 | ))
 24 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 25 | 
 26 | const AlertDialogContent = React.forwardRef(({ className, ...props }, ref) => (
 27 |   <AlertDialogPortal>
 28 |     <AlertDialogOverlay />
 29 |     <AlertDialogPrimitive.Content
 30 |       ref={ref}
 31 |       className={cn(
 32 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
 33 |         className
 34 |       )}
 35 |       {...props} />
 36 |   </AlertDialogPortal>
 37 | ))
 38 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 39 | 
 40 | const AlertDialogHeader = ({
 41 |   className,
 42 |   ...props
 43 | }) => (
 44 |   <div
 45 |     className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
 46 |     {...props} />
 47 | )
 48 | AlertDialogHeader.displayName = "AlertDialogHeader"
 49 | 
 50 | const AlertDialogFooter = ({
 51 |   className,
 52 |   ...props
 53 | }) => (
 54 |   <div
 55 |     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
 56 |     {...props} />
 57 | )
 58 | AlertDialogFooter.displayName = "AlertDialogFooter"
 59 | 
 60 | const AlertDialogTitle = React.forwardRef(({ className, ...props }, ref) => (
 61 |   <AlertDialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold", className)} {...props} />
 62 | ))
 63 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 64 | 
 65 | const AlertDialogDescription = React.forwardRef(({ className, ...props }, ref) => (
 66 |   <AlertDialogPrimitive.Description
 67 |     ref={ref}
 68 |     className={cn("text-sm text-muted-foreground", className)}
 69 |     {...props} />
 70 | ))
 71 | AlertDialogDescription.displayName =
 72 |   AlertDialogPrimitive.Description.displayName
 73 | 
 74 | const AlertDialogAction = React.forwardRef(({ className, ...props }, ref) => (
 75 |   <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
 76 | ))
 77 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 78 | 
 79 | const AlertDialogCancel = React.forwardRef(({ className, ...props }, ref) => (
 80 |   <AlertDialogPrimitive.Cancel
 81 |     ref={ref}
 82 |     className={cn(buttonVariants({ variant: "outline" }), "mt-2 sm:mt-0", className)}
 83 |     {...props} />
 84 | ))
 85 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 86 | 
 87 | export {
 88 |   AlertDialog,
 89 |   AlertDialogPortal,
 90 |   AlertDialogOverlay,
 91 |   AlertDialogTrigger,
 92 |   AlertDialogContent,
 93 |   AlertDialogHeader,
 94 |   AlertDialogFooter,
 95 |   AlertDialogTitle,
 96 |   AlertDialogDescription,
 97 |   AlertDialogAction,
 98 |   AlertDialogCancel,
 99 | }
100 | 


--------------------------------------------------------------------------------
/components/ui/button.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva } from "class-variance-authority";
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-destructive-foreground hover:bg-destructive/90",
15 |         outline:
16 |           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost: "hover:bg-accent hover:text-accent-foreground",
20 |         link: "text-primary underline-offset-4 hover:underline",
21 |       },
22 |       size: {
23 |         default: "h-10 px-4 py-2",
24 |         sm: "h-9 rounded-md px-3",
25 |         lg: "h-11 rounded-md px-8",
26 |         icon: "h-10 w-10",
27 |       },
28 |     },
29 |     defaultVariants: {
30 |       variant: "default",
31 |       size: "default",
32 |     },
33 |   }
34 | )
35 | 
36 | const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
37 |   const Comp = asChild ? Slot : "button"
38 |   return (
39 |     (<Comp
40 |       className={cn(buttonVariants({ variant, size, className }))}
41 |       ref={ref}
42 |       {...props} />)
43 |   );
44 | })
45 | Button.displayName = "Button"
46 | 
47 | export { Button, buttonVariants }
48 | 


--------------------------------------------------------------------------------
/components/ui/calendar.jsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import * as React from "react"
 3 | import { ChevronLeft, ChevronRight } from "lucide-react"
 4 | import { DayPicker } from "react-day-picker"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | import { buttonVariants } from "@/components/ui/button"
 8 | 
 9 | function Calendar({
10 |   className,
11 |   classNames,
12 |   showOutsideDays = true,
13 |   ...props
14 | }) {
15 |   return (
16 |     (<DayPicker
17 |       showOutsideDays={showOutsideDays}
18 |       className={cn("p-3", className)}
19 |       classNames={{
20 |         months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
21 |         month: "space-y-4",
22 |         caption: "flex justify-center pt-1 relative items-center",
23 |         caption_label: "text-sm font-medium",
24 |         nav: "space-x-1 flex items-center",
25 |         nav_button: cn(
26 |           buttonVariants({ variant: "outline" }),
27 |           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
28 |         ),
29 |         nav_button_previous: "absolute left-1",
30 |         nav_button_next: "absolute right-1",
31 |         table: "w-full border-collapse space-y-1",
32 |         head_row: "flex",
33 |         head_cell:
34 |           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
35 |         row: "flex w-full mt-2",
36 |         cell: "h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
37 |         day: cn(
38 |           buttonVariants({ variant: "ghost" }),
39 |           "h-9 w-9 p-0 font-normal aria-selected:opacity-100"
40 |         ),
41 |         day_range_end: "day-range-end",
42 |         day_selected:
43 |           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
44 |         day_today: "bg-accent text-accent-foreground",
45 |         day_outside:
46 |           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
47 |         day_disabled: "text-muted-foreground opacity-50",
48 |         day_range_middle:
49 |           "aria-selected:bg-accent aria-selected:text-accent-foreground",
50 |         day_hidden: "invisible",
51 |         ...classNames,
52 |       }}
53 |       components={{
54 |         IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
55 |         IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
56 |       }}
57 |       {...props} />)
58 |   );
59 | }
60 | Calendar.displayName = "Calendar"
61 | 
62 | export { Calendar }
63 | 


--------------------------------------------------------------------------------
/components/ui/command.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | import * as React from "react"
  3 | import { Command as CommandPrimitive } from "cmdk"
  4 | import { Search } from "lucide-react"
  5 | 
  6 | import { cn } from "@/lib/utils"
  7 | import { Dialog, DialogContent } from "@/components/ui/dialog"
  8 | 
  9 | const Command = React.forwardRef(({ className, ...props }, ref) => (
 10 |   <CommandPrimitive
 11 |     ref={ref}
 12 |     className={cn(
 13 |       "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
 14 |       className
 15 |     )}
 16 |     {...props} />
 17 | ))
 18 | Command.displayName = CommandPrimitive.displayName
 19 | 
 20 | const CommandDialog = ({
 21 |   children,
 22 |   ...props
 23 | }) => {
 24 |   return (
 25 |     (<Dialog {...props}>
 26 |       <DialogContent className="overflow-hidden p-0 shadow-lg">
 27 |         <Command
 28 |           className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
 29 |           {children}
 30 |         </Command>
 31 |       </DialogContent>
 32 |     </Dialog>)
 33 |   );
 34 | }
 35 | 
 36 | const CommandInput = React.forwardRef(({ className, ...props }, ref) => (
 37 |   <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
 38 |     <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
 39 |     <CommandPrimitive.Input
 40 |       ref={ref}
 41 |       className={cn(
 42 |         "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
 43 |         className
 44 |       )}
 45 |       {...props} />
 46 |   </div>
 47 | ))
 48 | 
 49 | CommandInput.displayName = CommandPrimitive.Input.displayName
 50 | 
 51 | const CommandList = React.forwardRef(({ className, ...props }, ref) => (
 52 |   <CommandPrimitive.List
 53 |     ref={ref}
 54 |     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
 55 |     {...props} />
 56 | ))
 57 | 
 58 | CommandList.displayName = CommandPrimitive.List.displayName
 59 | 
 60 | const CommandEmpty = React.forwardRef((props, ref) => (
 61 |   <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
 62 | ))
 63 | 
 64 | CommandEmpty.displayName = CommandPrimitive.Empty.displayName
 65 | 
 66 | const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (
 67 |   <CommandPrimitive.Group
 68 |     ref={ref}
 69 |     className={cn(
 70 |       "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
 71 |       className
 72 |     )}
 73 |     {...props} />
 74 | ))
 75 | 
 76 | CommandGroup.displayName = CommandPrimitive.Group.displayName
 77 | 
 78 | const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (
 79 |   <CommandPrimitive.Separator ref={ref} className={cn("-mx-1 h-px bg-border", className)} {...props} />
 80 | ))
 81 | CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 82 | 
 83 | const CommandItem = React.forwardRef(({ className, ...props }, ref) => (
 84 |   <CommandPrimitive.Item
 85 |     ref={ref}
 86 |     className={cn(
 87 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 88 |       className
 89 |     )}
 90 |     {...props} />
 91 | ))
 92 | 
 93 | CommandItem.displayName = CommandPrimitive.Item.displayName
 94 | 
 95 | const CommandShortcut = ({
 96 |   className,
 97 |   ...props
 98 | }) => {
 99 |   return (
100 |     (<span
101 |       className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
102 |       {...props} />)
103 |   );
104 | }
105 | CommandShortcut.displayName = "CommandShortcut"
106 | 
107 | export {
108 |   Command,
109 |   CommandDialog,
110 |   CommandInput,
111 |   CommandList,
112 |   CommandEmpty,
113 |   CommandGroup,
114 |   CommandItem,
115 |   CommandShortcut,
116 |   CommandSeparator,
117 | }
118 | 


--------------------------------------------------------------------------------
/components/ui/dialog.jsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as DialogPrimitive from "@radix-ui/react-dialog"
 5 | import { X } from "lucide-react"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const Dialog = DialogPrimitive.Root
10 | 
11 | const DialogTrigger = DialogPrimitive.Trigger
12 | 
13 | const DialogPortal = DialogPrimitive.Portal
14 | 
15 | const DialogClose = DialogPrimitive.Close
16 | 
17 | const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
18 |   <DialogPrimitive.Overlay
19 |     ref={ref}
20 |     className={cn(
21 |       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
22 |       className
23 |     )}
24 |     {...props} />
25 | ))
26 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
27 | 
28 | const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
29 |   <DialogPortal>
30 |     <DialogOverlay />
31 |     <DialogPrimitive.Content
32 |       ref={ref}
33 |       className={cn(
34 |         "fixed left-[50%] top-[50%] z-50 grid w-full max-w-2xl translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
35 |         className
36 |       )}
37 |       {...props}>
38 |       {children}
39 |       <DialogPrimitive.Close
40 |         className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
41 |         <X className="h-4 w-4" />
42 |         <span className="sr-only">Close</span>
43 |       </DialogPrimitive.Close>
44 |     </DialogPrimitive.Content>
45 |   </DialogPortal>
46 | ))
47 | DialogContent.displayName = DialogPrimitive.Content.displayName
48 | 
49 | const DialogHeader = ({
50 |   className,
51 |   ...props
52 | }) => (
53 |   <div
54 |     className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
55 |     {...props} />
56 | )
57 | DialogHeader.displayName = "DialogHeader"
58 | 
59 | const DialogFooter = ({
60 |   className,
61 |   ...props
62 | }) => (
63 |   <div
64 |     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
65 |     {...props} />
66 | )
67 | DialogFooter.displayName = "DialogFooter"
68 | 
69 | const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
70 |   <DialogPrimitive.Title
71 |     ref={ref}
72 |     className={cn("text-lg font-semibold leading-none tracking-tight", className)}
73 |     {...props} />
74 | ))
75 | DialogTitle.displayName = DialogPrimitive.Title.displayName
76 | 
77 | const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
78 |   <DialogPrimitive.Description
79 |     ref={ref}
80 |     className={cn("text-sm text-muted-foreground", className)}
81 |     {...props} />
82 | ))
83 | DialogDescription.displayName = DialogPrimitive.Description.displayName
84 | 
85 | export {
86 |   Dialog,
87 |   DialogPortal,
88 |   DialogOverlay,
89 |   DialogClose,
90 |   DialogTrigger,
91 |   DialogContent,
92 |   DialogHeader,
93 |   DialogFooter,
94 |   DialogTitle,
95 |   DialogDescription,
96 | }
97 | 


--------------------------------------------------------------------------------
/components/ui/input.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef(({ className, type, ...props }, ref) => {
 6 |   return (
 7 |     (<input
 8 |       type={type}
 9 |       className={cn(
10 |         "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
11 |         className
12 |       )}
13 |       ref={ref}
14 |       {...props} />)
15 |   );
16 | })
17 | Input.displayName = "Input"
18 | 
19 | export { Input }
20 | 


--------------------------------------------------------------------------------
/components/ui/popover.jsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as PopoverPrimitive from "@radix-ui/react-popover"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Popover = PopoverPrimitive.Root
 9 | 
10 | const PopoverTrigger = PopoverPrimitive.Trigger
11 | 
12 | const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
13 |   <PopoverPrimitive.Portal>
14 |     <PopoverPrimitive.Content
15 |       ref={ref}
16 |       align={align}
17 |       sideOffset={sideOffset}
18 |       className={cn(
19 |         "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
20 |         className
21 |       )}
22 |       {...props} />
23 |   </PopoverPrimitive.Portal>
24 | ))
25 | PopoverContent.displayName = PopoverPrimitive.Content.displayName
26 | 
27 | export { Popover, PopoverTrigger, PopoverContent }
28 | 


--------------------------------------------------------------------------------
/components/ui/sonner.jsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import { useTheme } from "next-themes"
 3 | import { Toaster as Sonner } from "sonner"
 4 | 
 5 | const Toaster = ({
 6 |   ...props
 7 | }) => {
 8 |   const { theme = "system" } = useTheme()
 9 | 
10 |   return (
11 |     (<Sonner
12 |       theme={theme}
13 |       className="toaster group"
14 |       toastOptions={{
15 |         classNames: {
16 |           toast:
17 |             "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
18 |           description: "group-[.toast]:text-muted-foreground",
19 |           actionButton:
20 |             "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
21 |           cancelButton:
22 |             "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
23 |         },
24 |       }}
25 |       {...props} />)
26 |   );
27 | }
28 | 
29 | export { Toaster }
30 | 


--------------------------------------------------------------------------------
/components/ui/tabs.jsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as TabsPrimitive from "@radix-ui/react-tabs"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Tabs = TabsPrimitive.Root
 9 | 
10 | const TabsList = React.forwardRef(({ className, ...props }, ref) => (
11 |   <TabsPrimitive.List
12 |     ref={ref}
13 |     className={cn(
14 |       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
15 |       className
16 |     )}
17 |     {...props} />
18 | ))
19 | TabsList.displayName = TabsPrimitive.List.displayName
20 | 
21 | const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
22 |   <TabsPrimitive.Trigger
23 |     ref={ref}
24 |     className={cn(
25 |       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
26 |       className
27 |     )}
28 |     {...props} />
29 | ))
30 | TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
31 | 
32 | const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
33 |   <TabsPrimitive.Content
34 |     ref={ref}
35 |     className={cn(
36 |       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
37 |       className
38 |     )}
39 |     {...props} />
40 | ))
41 | TabsContent.displayName = TabsPrimitive.Content.displayName
42 | 
43 | export { Tabs, TabsList, TabsTrigger, TabsContent }
44 | 


--------------------------------------------------------------------------------
/components/ui/textarea.jsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef(({ className, ...props }, ref) => {
 6 |   return (
 7 |     (<textarea
 8 |       className={cn(
 9 |         "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
10 |         className
11 |       )}
12 |       ref={ref}
13 |       {...props} />)
14 |   );
15 | })
16 | Textarea.displayName = "Textarea"
17 | 
18 | export { Textarea }
19 | 


--------------------------------------------------------------------------------
/emails/index.jsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |     Body,
  3 |     Button,
  4 |     Container,
  5 |     Head,
  6 |     Hr,
  7 |     Html,
  8 |     Img,
  9 |     Preview,
 10 |     Section,
 11 |     Text,
 12 |   } from "@react-email/components";
 13 |   import * as React from "react";
 14 |   
 15 |  
 16 |   
 17 |   const baseUrl = process.env.VERCEL_URL
 18 |     ? `https://${process.env.VERCEL_URL}`
 19 |     : "http://localhost:3000";
 20 |   
 21 |   export const EmailTemplate = ({
 22 |     UserName,
 23 |     Email,
 24 |     Time,
 25 |     Date,
 26 |     doctor,
 27 |     Note
 28 |   }) => (
 29 |     <Html>
 30 |       <Head />
 31 |       <Preview>
 32 |         The sales intelligence platform that helps you uncover qualified leads.
 33 |       </Preview>
 34 |       <Body style={main}>
 35 |         <Container style={container}>
 36 |           <Img
 37 |             src={`${baseUrl}/logo.svg`}
 38 |             width="170"
 39 |             height="50"
 40 |             alt="Koala"
 41 |             style={logo}
 42 |           />
 43 |           <Text style={paragraph}>Hi {UserName},</Text>
 44 |           <Text style={paragraph}>
 45 |            Your Appointment with Doctor has booked on {Date} at {Time}
 46 |           </Text>
 47 |           {/* <Section style={btnContainer}>
 48 |             <Button style={button} href="https://getkoala.com">
 49 |               Get started
 50 |             </Button>
 51 |           </Section> */}
 52 |           <Text style={paragraph}>
 53 |             Best,
 54 |             <br />
 55 |             Tubeguruji App 
 56 |           </Text>
 57 |           <Hr style={hr} />
 58 |           <Text style={footer}>
 59 |             Developed by TubeGuruji!
 60 |           </Text>
 61 |         </Container>
 62 |       </Body>
 63 |     </Html>
 64 |   );
 65 |   
 66 | 
 67 |   
 68 |   export default EmailTemplate;
 69 |   
 70 |   const main = {
 71 |     backgroundColor: "#ffffff",
 72 |     fontFamily:
 73 |       '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif',
 74 |   };
 75 |   
 76 |   const container = {
 77 |     margin: "0 auto",
 78 |     padding: "20px 0 48px",
 79 |   };
 80 |   
 81 |   const logo = {
 82 |     margin: "0 auto",
 83 |   };
 84 |   
 85 |   const paragraph = {
 86 |     fontSize: "16px",
 87 |     lineHeight: "26px",
 88 |   };
 89 |   
 90 |   const btnContainer = {
 91 |     textAlign: "center",
 92 |   };
 93 |   
 94 |   const button = {
 95 |     backgroundColor: "#5F51E8",
 96 |     borderRadius: "3px",
 97 |     color: "#fff",
 98 |     fontSize: "16px",
 99 |     textDecoration: "none",
100 |     textAlign: "center",
101 |     display: "block",
102 |     padding: "12px",
103 |   };
104 |   
105 |   const hr = {
106 |     borderColor: "#cccccc",
107 |     margin: "20px 0",
108 |   };
109 |   
110 |   const footer = {
111 |     color: "#8898aa",
112 |     fontSize: "12px",
113 |   };
114 |   


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
1 | import { clsx } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/middleware.js:
--------------------------------------------------------------------------------
 1 | import { NextResponse } from 'next/server'
 2 | import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server";
 3 | // This function can be marked `async` if using `await` inside
 4 | export async function middleware(request) {
 5 |     const { isAuthenticated } = getKindeServerSession();
 6 |     if (!(await isAuthenticated())) {
 7 |        // redirect("/api/auth/login");
 8 |   return NextResponse.redirect(new URL('/api/auth/login?post_login_redirect_url=/', request.url))
 9 | 
10 |     }
11 | }
12 |  
13 | // See "Matching Paths" below to learn more
14 | export const config = {
15 |   matcher: ['/details/:path*'],
16 | }


--------------------------------------------------------------------------------
/next.config.mjs:
--------------------------------------------------------------------------------
 1 | /** @type {import('next').NextConfig} */
 2 | const nextConfig = {
 3 |     reactStrictMode: false,
 4 |     images:{
 5 |         domains:['res.cloudinary.com','lh3.googleusercontent.com'],
 6 |         unoptimized:true
 7 |     }
 8 | };
 9 | 
10 | export default nextConfig;
11 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "doctor-appointment-booking-web-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint",
10 |     "email": "email dev"
11 |   },
12 |   "dependencies": {
13 |     "@kinde-oss/kinde-auth-nextjs": "^2.1.11",
14 |     "@radix-ui/react-alert-dialog": "^1.0.5",
15 |     "@radix-ui/react-dialog": "^1.0.5",
16 |     "@radix-ui/react-popover": "^1.0.7",
17 |     "@radix-ui/react-slot": "^1.0.2",
18 |     "@radix-ui/react-tabs": "^1.0.4",
19 |     "@react-email/components": "0.0.14",
20 |     "axios": "^1.6.7",
21 |     "class-variance-authority": "^0.7.0",
22 |     "clsx": "^2.1.0",
23 |     "cmdk": "^0.2.1",
24 |     "lucide-react": "^0.330.0",
25 |     "moment": "^2.30.1",
26 |     "next": "14.1.0",
27 |     "next-themes": "^0.2.1",
28 |     "react": "^18",
29 |     "react-day-picker": "^8.10.0",
30 |     "react-dom": "^18",
31 |     "react-email": "2.0.0",
32 |     "resend": "^3.2.0",
33 |     "sonner": "^1.4.0",
34 |     "tailwind-merge": "^2.2.1",
35 |     "tailwindcss-animate": "^1.0.7"
36 |   },
37 |   "devDependencies": {
38 |     "autoprefixer": "^10.0.1",
39 |     "postcss": "^8",
40 |     "tailwindcss": "^3.3.0"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | };
7 | 


--------------------------------------------------------------------------------
/public/doctors.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/Doctor-Appointment-Booking-Web-Nextjs/7980c8892b86c991ff3e005b651ac8f8380d44b1/public/doctors.jpg


--------------------------------------------------------------------------------
/public/facebook.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/Doctor-Appointment-Booking-Web-Nextjs/7980c8892b86c991ff3e005b651ac8f8380d44b1/public/facebook.png


--------------------------------------------------------------------------------
/public/linkedin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/Doctor-Appointment-Booking-Web-Nextjs/7980c8892b86c991ff3e005b651ac8f8380d44b1/public/linkedin.png


--------------------------------------------------------------------------------
/public/logo.svg:
--------------------------------------------------------------------------------
1 | <svg id="logo-87" width="202" height="40" viewBox="0 0 202 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path class="ccustom" fill-rule="evenodd" clip-rule="evenodd" d="M25.5557 11.6853C23.9112 10.5865 21.9778 10 20 10V0C23.9556 0 27.8224 1.17298 31.1114 3.37061C34.4004 5.56823 36.9638 8.69181 38.4776 12.3463C39.9913 16.0008 40.3874 20.0222 39.6157 23.9018C38.844 27.7814 36.9392 31.3451 34.1421 34.1421C31.3451 36.9392 27.7814 38.844 23.9018 39.6157C20.0222 40.3874 16.0008 39.9913 12.3463 38.4776C8.6918 36.9638 5.56823 34.4004 3.37061 31.1114C1.17298 27.8224 0 23.9556 0 20H10C10 21.9778 10.5865 23.9112 11.6853 25.5557C12.7841 27.2002 14.3459 28.4819 16.1732 29.2388C18.0004 29.9957 20.0111 30.1937 21.9509 29.8078C23.8907 29.422 25.6725 28.4696 27.0711 27.0711C28.4696 25.6725 29.422 23.8907 29.8078 21.9509C30.1937 20.0111 29.9957 18.0004 29.2388 16.1732C28.4819 14.3459 27.2002 12.7841 25.5557 11.6853Z" fill="#007DFC"></path><path class="ccustom" fill-rule="evenodd" clip-rule="evenodd" d="M10 1.47023e-06C10 1.31322 9.74135 2.61358 9.2388 3.82684C8.73625 5.04009 7.99966 6.14248 7.07107 7.07107C6.14249 7.99966 5.0401 8.73625 3.82684 9.2388C2.61358 9.74134 1.31322 10 6.15916e-06 10L5.72205e-06 20C2.62644 20 5.22716 19.4827 7.65368 18.4776C10.0802 17.4725 12.285 15.9993 14.1421 14.1421C15.9993 12.285 17.4725 10.0802 18.4776 7.65367C19.4827 5.22715 20 2.62643 20 -3.8147e-06L10 1.47023e-06Z" fill="#007DFC"></path><path class="ccustom" d="M125.619 14.4525H120.767V29.8648H125.619V14.4525Z" fill="#007DFC"></path><path class="ccustom" d="M121.307 11.5666C121.814 12.074 122.448 12.3277 123.209 12.3277C123.97 12.3277 124.594 12.074 125.08 11.5666C125.567 11.0381 125.81 10.4038 125.81 9.66385C125.81 8.90277 125.567 8.26849 125.08 7.76111C124.594 7.25369 123.97 7 123.209 7C122.448 7 121.814 7.25369 121.307 7.76111C120.82 8.26849 120.577 8.90277 120.577 9.66385C120.577 10.4038 120.82 11.0381 121.307 11.5666Z" fill="#007DFC"></path><path class="ccustom" d="M51.1562 29.8648V7.47568H56.1351V25.4885H66.0612V29.8648H51.1562Z" fill="#007DFC"></path><path class="ccustom" fill-rule="evenodd" clip-rule="evenodd" d="M75.0274 30.2136C73.4418 30.2136 72.0042 29.8648 70.7145 29.1671C69.446 28.4483 68.4418 27.4758 67.7018 26.2495C66.9619 25.0233 66.5919 23.6491 66.5919 22.1269C66.5919 20.6047 66.9619 19.2411 67.7018 18.036C68.4418 16.8309 69.446 15.8795 70.7145 15.1819C71.983 14.463 73.4207 14.1036 75.0274 14.1036C76.6342 14.1036 78.0718 14.4525 79.3403 15.1501C80.6088 15.8478 81.6131 16.8098 82.353 18.036C83.093 19.2411 83.463 20.6047 83.463 22.1269C83.463 23.6491 83.093 25.0233 82.353 26.2495C81.6131 27.4758 80.6088 28.4483 79.3403 29.1671C78.0718 29.8648 76.6342 30.2136 75.0274 30.2136ZM75.0274 25.8056C75.7251 25.8056 76.3382 25.6576 76.8668 25.3616C77.3953 25.0445 77.797 24.6111 78.0718 24.0614C78.3678 23.4906 78.5158 22.8457 78.5158 22.1269C78.5158 21.4081 78.3678 20.7844 78.0718 20.2559C77.7758 19.7062 77.3636 19.2834 76.835 18.9874C76.3276 18.6702 75.7251 18.5117 75.0274 18.5117C74.3509 18.5117 73.7484 18.6702 73.2198 18.9874C72.6913 19.2834 72.279 19.7062 71.983 20.2559C71.687 20.8056 71.5391 21.4398 71.5391 22.1586C71.5391 22.8563 71.687 23.4906 71.983 24.0614C72.279 24.6111 72.6913 25.0445 73.2198 25.3616C73.7484 25.6576 74.3509 25.8056 75.0274 25.8056Z" fill="#007DFC"></path><path class="ccustom" fill-rule="evenodd" clip-rule="evenodd" d="M87.3057 35.8902C88.5953 36.4821 90.0858 36.7781 91.7772 36.7781C93.4262 36.7781 94.8956 36.4504 96.1852 35.795C97.4749 35.1396 98.4896 34.2306 99.2296 33.0678C99.9695 31.905 100.34 30.5308 100.34 28.9451V14.4525H95.5826V15.488C95.2288 15.1902 94.827 14.9402 94.3776 14.7379C93.553 14.3362 92.6122 14.1353 91.5552 14.1353C90.1387 14.1353 88.8807 14.4736 87.7814 15.1501C86.6819 15.8055 85.8152 16.7146 85.1809 17.8774C84.5466 19.0191 84.2296 20.3087 84.2296 21.7464C84.2296 23.1629 84.5466 24.4525 85.1809 25.6153C85.8152 26.7781 86.6819 27.6978 87.7814 28.3743C88.8807 29.0508 90.1387 29.3891 91.5552 29.3891C92.5911 29.3891 93.5319 29.1883 94.3776 28.7866C94.7872 28.592 95.1572 28.3627 95.4875 28.0986V29.072C95.4875 30.1502 95.1387 30.9853 94.441 31.5773C93.7645 32.1693 92.8237 32.4652 91.6186 32.4652C90.6461 32.4652 89.811 32.2961 89.1133 31.9578C88.4368 31.6196 87.8236 31.1227 87.2739 30.4673L84.293 33.4483C85.0329 34.5054 86.0372 35.3194 87.3057 35.8902ZM94.219 24.6322C93.7327 24.9282 93.1514 25.0762 92.4748 25.0762C91.7983 25.0762 91.2063 24.9282 90.6989 24.6322C90.2126 24.3362 89.8321 23.9345 89.5573 23.4271C89.2824 22.8986 89.145 22.3383 89.145 21.7464C89.145 21.1121 89.2824 20.5413 89.5573 20.0339C89.8321 19.5265 90.2232 19.1248 90.7306 18.8288C91.238 18.5328 91.8194 18.3848 92.4748 18.3848C93.1514 18.3848 93.7327 18.5328 94.219 18.8288C94.7264 19.1248 95.1069 19.5265 95.3607 20.0339C95.6355 20.5413 95.7729 21.1121 95.7729 21.7464C95.7729 22.3806 95.6355 22.9514 95.3607 23.4588C95.1069 23.9451 94.7264 24.3362 94.219 24.6322Z" fill="#007DFC"></path><path class="ccustom" fill-rule="evenodd" clip-rule="evenodd" d="M110.551 30.2136C108.965 30.2136 107.527 29.8648 106.238 29.1671C104.969 28.4483 103.965 27.4758 103.225 26.2495C102.485 25.0233 102.115 23.6491 102.115 22.1269C102.115 20.6047 102.485 19.2411 103.225 18.036C103.965 16.8309 104.969 15.8795 106.238 15.1819C107.506 14.463 108.944 14.1036 110.551 14.1036C112.157 14.1036 113.595 14.4525 114.863 15.1501C116.132 15.8478 117.136 16.8098 117.876 18.036C118.616 19.2411 118.986 20.6047 118.986 22.1269C118.986 23.6491 118.616 25.0233 117.876 26.2495C117.136 27.4758 116.132 28.4483 114.863 29.1671C113.595 29.8648 112.157 30.2136 110.551 30.2136ZM110.551 25.8056C111.248 25.8056 111.861 25.6576 112.39 25.3616C112.918 25.0445 113.32 24.6111 113.595 24.0614C113.891 23.4906 114.039 22.8457 114.039 22.1269C114.039 21.4081 113.891 20.7844 113.595 20.2559C113.299 19.7062 112.887 19.2834 112.358 18.9874C111.851 18.6702 111.248 18.5117 110.551 18.5117C109.874 18.5117 109.271 18.6702 108.743 18.9874C108.214 19.2834 107.802 19.7062 107.506 20.2559C107.21 20.8056 107.062 21.4398 107.062 22.1586C107.062 22.8563 107.21 23.4906 107.506 24.0614C107.802 24.6111 108.214 25.0445 108.743 25.3616C109.271 25.6576 109.874 25.8056 110.551 25.8056Z" fill="#007DFC"></path><path class="ccustom" fill-rule="evenodd" clip-rule="evenodd" d="M137.281 30.1819C136.246 30.1819 135.294 29.9811 134.427 29.5794C133.971 29.368 133.559 29.1156 133.191 28.8222V36.3659H128.402V14.4525H133.254V15.5162C133.606 15.2283 133.997 14.9794 134.427 14.7696C135.294 14.3467 136.246 14.1353 137.281 14.1353C138.74 14.1353 140.03 14.4842 141.15 15.1819C142.292 15.8795 143.18 16.8309 143.814 18.036C144.47 19.2411 144.797 20.6153 144.797 22.1586C144.797 23.702 144.47 25.0762 143.814 26.2813C143.18 27.4864 142.292 28.4377 141.15 29.1354C140.03 29.8331 138.74 30.1819 137.281 30.1819ZM136.394 25.8056C137.091 25.8056 137.694 25.647 138.201 25.3299C138.73 25.0128 139.142 24.5793 139.438 24.0297C139.734 23.48 139.882 22.8563 139.882 22.1586C139.882 21.4398 139.734 20.8056 139.438 20.2559C139.142 19.7062 138.73 19.2834 138.201 18.9874C137.694 18.6702 137.102 18.5117 136.425 18.5117C135.749 18.5117 135.146 18.6702 134.618 18.9874C134.11 19.2834 133.709 19.7062 133.413 20.2559C133.117 20.8056 132.969 21.4398 132.969 22.1586C132.969 22.8563 133.106 23.48 133.381 24.0297C133.677 24.5793 134.089 25.0128 134.618 25.3299C135.146 25.647 135.738 25.8056 136.394 25.8056Z" fill="#007DFC"></path><path class="ccustom" d="M149.546 29.8965C150.434 30.1291 151.332 30.2453 152.241 30.2453C154.165 30.2453 155.687 29.8014 156.808 28.9134C157.949 28.0255 158.52 26.831 158.52 25.3299C158.52 24.3574 158.341 23.5751 157.981 22.9832C157.622 22.3701 157.157 21.8838 156.586 21.5244C156.015 21.165 155.412 20.8795 154.778 20.6681C154.144 20.4567 153.541 20.277 152.971 20.129C152.4 19.981 151.935 19.8119 151.575 19.6216C151.216 19.4313 151.036 19.1776 151.036 18.8605C151.036 18.5645 151.174 18.3425 151.448 18.1945C151.723 18.0254 152.135 17.9409 152.685 17.9409C153.256 17.9409 153.837 18.0571 154.429 18.2897C155.042 18.5222 155.592 18.924 156.078 19.4948L158.837 16.7041C158.14 15.8161 157.231 15.1501 156.11 14.7062C155.011 14.2411 153.806 14.0085 152.495 14.0085C151.248 14.0085 150.159 14.2199 149.229 14.6427C148.298 15.0656 147.579 15.647 147.072 16.3869C146.565 17.1057 146.311 17.962 146.311 18.9557C146.311 19.8859 146.491 20.6576 146.85 21.2707C147.209 21.8626 147.675 22.3278 148.245 22.666C148.816 23.0043 149.419 23.2686 150.053 23.4588C150.687 23.6491 151.29 23.8288 151.861 23.998C152.431 24.146 152.897 24.3257 153.256 24.5371C153.637 24.7274 153.827 25.0128 153.827 25.3933C153.827 25.6893 153.668 25.9218 153.351 26.091C153.055 26.2601 152.622 26.3447 152.051 26.3447C151.226 26.3447 150.465 26.1967 149.768 25.9007C149.07 25.5836 148.467 25.1502 147.96 24.6005L145.201 27.3912C145.73 27.962 146.364 28.4695 147.104 28.9134C147.865 29.3362 148.679 29.6639 149.546 29.8965Z" fill="#007DFC"></path><path class="ccustom" d="M167.368 30.2136C165.952 30.2136 164.694 29.9282 163.595 29.3574C162.516 28.7654 161.671 27.962 161.058 26.9472C160.444 25.9113 160.138 24.7274 160.138 23.3954V14.4525H164.99V23.332C164.99 23.8605 165.074 24.3151 165.244 24.6956C165.434 25.0762 165.709 25.3722 166.068 25.5836C166.428 25.795 166.861 25.9007 167.368 25.9007C168.087 25.9007 168.658 25.6787 169.081 25.2347C169.504 24.7696 169.715 24.1354 169.715 23.332V14.4525H174.567V23.3637C174.567 24.7168 174.261 25.9113 173.647 26.9472C173.034 27.962 172.189 28.7654 171.11 29.3574C170.032 29.9282 168.785 30.2136 167.368 30.2136Z" fill="#007DFC"></path><path class="ccustom" d="M181.831 14.4525H176.979V29.8648H181.831V20.8584C181.831 20.3299 181.937 19.8859 182.148 19.5265C182.381 19.1671 182.688 18.8922 183.068 18.702C183.449 18.4905 183.882 18.3848 184.368 18.3848C185.066 18.3848 185.647 18.6068 186.112 19.0508C186.599 19.4736 186.842 20.0762 186.842 20.8584V29.8648H191.694V20.8584C191.694 20.3299 191.8 19.8859 192.011 19.5265C192.244 19.1671 192.55 18.8922 192.931 18.702C193.311 18.4905 193.745 18.3848 194.231 18.3848C194.929 18.3848 195.51 18.6068 195.975 19.0508C196.461 19.4736 196.704 20.0762 196.704 20.8584V29.8648H201.557V20.3193C201.557 19.0297 201.282 17.9303 200.732 17.0212C200.203 16.0909 199.474 15.3827 198.544 14.8965C197.635 14.389 196.588 14.1353 195.404 14.1353C194.199 14.1353 193.11 14.3996 192.138 14.9282C191.506 15.2649 190.954 15.6995 190.481 16.2319C190.04 15.675 189.504 15.2193 188.871 14.8647C188.026 14.3785 187.064 14.1353 185.986 14.1353C184.844 14.1353 183.819 14.3785 182.91 14.8647C182.514 15.067 182.155 15.3093 181.831 15.5916V14.4525Z" fill="#007DFC"></path></svg>


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/Doctor-Appointment-Booking-Web-Nextjs/7980c8892b86c991ff3e005b651ac8f8380d44b1/public/twitter.png


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/public/youtube.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rrs301/Doctor-Appointment-Booking-Web-Nextjs/7980c8892b86c991ff3e005b651ac8f8380d44b1/public/youtube.png


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   darkMode: ["class"],
 4 |   content: [
 5 |     './pages/**/*.{js,jsx}',
 6 |     './components/**/*.{js,jsx}',
 7 |     './app/**/*.{js,jsx}',
 8 |     './src/**/*.{js,jsx}',
 9 |   ],
10 |   prefix: "",
11 |   theme: {
12 |     container: {
13 |       center: true,
14 |       padding: "2rem",
15 |       screens: {
16 |         "2xl": "1400px",
17 |       },
18 |     },
19 |     extend: {
20 |       colors: {
21 |         border: "hsl(var(--border))",
22 |         input: "hsl(var(--input))",
23 |         ring: "hsl(var(--ring))",
24 |         background: "hsl(var(--background))",
25 |         foreground: "hsl(var(--foreground))",
26 |         primary: {
27 |           DEFAULT: "#0D7DFF",
28 |           foreground: "hsl(var(--primary-foreground))",
29 |         },
30 |         secondary: {
31 |           DEFAULT: "hsl(var(--secondary))",
32 |           foreground: "hsl(var(--secondary-foreground))",
33 |         },
34 |         destructive: {
35 |           DEFAULT: "hsl(var(--destructive))",
36 |           foreground: "hsl(var(--destructive-foreground))",
37 |         },
38 |         muted: {
39 |           DEFAULT: "hsl(var(--muted))",
40 |           foreground: "hsl(var(--muted-foreground))",
41 |         },
42 |         accent: {
43 |           DEFAULT: "hsl(var(--accent))",
44 |           foreground: "hsl(var(--accent-foreground))",
45 |         },
46 |         popover: {
47 |           DEFAULT: "hsl(var(--popover))",
48 |           foreground: "hsl(var(--popover-foreground))",
49 |         },
50 |         card: {
51 |           DEFAULT: "hsl(var(--card))",
52 |           foreground: "hsl(var(--card-foreground))",
53 |         },
54 |       },
55 |       borderRadius: {
56 |         lg: "var(--radius)",
57 |         md: "calc(var(--radius) - 2px)",
58 |         sm: "calc(var(--radius) - 4px)",
59 |       },
60 |       keyframes: {
61 |         "accordion-down": {
62 |           from: { height: "0" },
63 |           to: { height: "var(--radix-accordion-content-height)" },
64 |         },
65 |         "accordion-up": {
66 |           from: { height: "var(--radix-accordion-content-height)" },
67 |           to: { height: "0" },
68 |         },
69 |       },
70 |       animation: {
71 |         "accordion-down": "accordion-down 0.2s ease-out",
72 |         "accordion-up": "accordion-up 0.2s ease-out",
73 |       },
74 |     },
75 |   },
76 |   plugins: [require("tailwindcss-animate")],
77 | }


--------------------------------------------------------------------------------