├── app ├── _components │ ├── Footer │ │ ├── index.css │ │ └── index.tsx │ ├── FooterInfo │ │ ├── index.css │ │ └── index.tsx │ ├── Pagination │ │ ├── index.css │ │ └── index.tsx │ ├── SpecialtyBox │ │ ├── index.css │ │ └── index.tsx │ ├── MobileMenu │ │ ├── index.css │ │ └── index.tsx │ ├── SectionTitle │ │ ├── index.css │ │ └── index.tsx │ ├── HeroImage │ │ ├── index.css │ │ └── index.tsx │ ├── Header │ │ ├── index.css │ │ └── index.tsx │ ├── IconContainer │ │ ├── index.css │ │ └── index.tsx │ ├── Hero │ │ ├── index.css │ │ └── index.tsx │ ├── ui │ │ └── LinkButton │ │ │ ├── index.css │ │ │ └── index.tsx │ ├── PaginatedContent │ │ ├── index.css │ │ └── index.tsx │ ├── DoctorCardFooter │ │ ├── index.css │ │ └── index.tsx │ ├── DoctorCardImage │ │ ├── index.css │ │ └── index.tsx │ ├── HeroContent │ │ ├── index.css │ │ └── index.tsx │ ├── HeroNavigation │ │ ├── index.css │ │ └── index.tsx │ ├── Logo │ │ └── index.tsx │ ├── PaginationControls │ │ ├── index.css │ │ └── index.tsx │ ├── GategorySearch │ │ ├── index.tsx │ │ └── index.css │ ├── PageButton │ │ ├── index.css │ │ └── index.tsx │ ├── Categories │ │ ├── index.css │ │ └── index.tsx │ ├── DoctorCardContent │ │ ├── index.css │ │ └── index.tsx │ ├── NavLinks │ │ ├── index.tsx │ │ └── index.css │ ├── hooks │ │ └── useLocalStorage.ts │ ├── DoctorCard │ │ ├── index.tsx │ │ └── index.css │ ├── Socials │ │ └── index.tsx │ ├── FavoriteButton │ │ └── index.tsx │ ├── DoctorsList │ │ └── index.tsx │ ├── CategorySearchBox │ │ ├── index.tsx │ │ └── index.css │ ├── FavoriteDoctor │ │ └── index.tsx │ ├── FavoriteCart │ │ └── index.tsx │ └── EmptyState │ │ └── index.tsx ├── favicon.ico ├── types │ └── index.ts ├── (routes) │ ├── details │ │ ├── layout.tsx │ │ ├── _components │ │ │ ├── ErrorMessage │ │ │ │ └── index.tsx │ │ │ ├── ContactInfo │ │ │ │ ├── index.css │ │ │ │ └── index.tsx │ │ │ ├── Button │ │ │ │ └── index.tsx │ │ │ ├── DoctorImage │ │ │ │ ├── index.tsx │ │ │ │ └── index.css │ │ │ ├── DoctorBody │ │ │ │ ├── index.css │ │ │ │ └── index.tsx │ │ │ ├── SuggestedDoctors │ │ │ │ ├── index.css │ │ │ │ └── index.tsx │ │ │ ├── AppointmentDialog │ │ │ │ ├── index.css │ │ │ │ └── index.tsx │ │ │ ├── DoctorSmallCard │ │ │ │ ├── index.css │ │ │ │ └── index.tsx │ │ │ ├── Details │ │ │ │ └── index.tsx │ │ │ └── AppointmentForm │ │ │ │ └── index.tsx │ │ ├── [recordId] │ │ │ ├── index.css │ │ │ └── page.tsx │ │ └── _ui │ │ │ ├── FormButton.tsx │ │ │ ├── FormField.tsx │ │ │ ├── CalendarField.tsx │ │ │ ├── FormRadioGroup.tsx │ │ │ └── FormSelect.tsx │ ├── search │ │ ├── _components │ │ │ └── CategoryList │ │ │ │ ├── index.css │ │ │ │ └── index.tsx │ │ ├── [categoryName] │ │ │ └── page.tsx │ │ └── layout.tsx │ └── appointments │ │ ├── index.css │ │ ├── _components │ │ ├── index.css │ │ ├── DeleteConfirmationDialog.tsx │ │ └── Appointment.tsx │ │ └── page.tsx ├── _utils │ └── index.ts ├── metadata.ts ├── globals.css ├── _animation │ └── index.ts ├── layout.tsx ├── page.tsx ├── _validations │ └── index.ts ├── _context │ └── MenuFavoriteContext.tsx └── _interfaces │ └── index.ts ├── public ├── doctors.webp ├── doctors1.webp ├── robots.txt ├── doctor-booking.webp ├── doctors │ ├── doctor1.webp │ ├── doctor10.webp │ ├── doctor11.webp │ ├── doctor12.webp │ ├── doctor13.webp │ ├── doctor14.webp │ ├── doctor15.webp │ ├── doctor16.webp │ ├── doctor17.webp │ ├── doctor18.webp │ ├── doctor19.webp │ ├── doctor2.webp │ ├── doctor20.webp │ ├── doctor21.webp │ ├── doctor22.webp │ ├── doctor23.webp │ ├── doctor24.webp │ ├── doctor25.webp │ ├── doctor26.webp │ ├── doctor27.webp │ ├── doctor28.webp │ ├── doctor29.webp │ ├── doctor3.webp │ ├── doctor30.webp │ ├── doctor31.webp │ ├── doctor32.webp │ ├── doctor33.webp │ ├── doctor34.webp │ ├── doctor35.webp │ ├── doctor36.webp │ ├── doctor37.webp │ ├── doctor38.webp │ ├── doctor39.webp │ ├── doctor4.webp │ ├── doctor40.webp │ ├── doctor41.webp │ ├── doctor42.webp │ ├── doctor43.webp │ ├── doctor44.webp │ ├── doctor45.webp │ ├── doctor46.webp │ ├── doctor47.webp │ ├── doctor48.webp │ ├── doctor49.webp │ ├── doctor5.webp │ ├── doctor50.webp │ ├── doctor51.webp │ ├── doctor52.webp │ ├── doctor53.webp │ ├── doctor54.webp │ ├── doctor55.webp │ ├── doctor56.webp │ ├── doctor57.webp │ ├── doctor58.webp │ ├── doctor59.webp │ ├── doctor6.webp │ ├── doctor60.webp │ ├── doctor7.webp │ ├── doctor8.webp │ └── doctor9.webp ├── heroSlides │ ├── slide1.webp │ ├── slide2.webp │ └── slide3.webp ├── SVGs │ ├── search.svg │ ├── menu-hamburger.svg │ ├── bones.svg │ ├── ear.svg │ ├── heart.svg │ ├── dentist.svg │ └── brain.svg ├── vercel.svg ├── next.svg └── Logo.svg ├── next.config.mjs ├── postcss.config.mjs ├── next-sitemap.config.ts ├── lib └── utils.ts ├── components.json ├── .gitignore ├── tsconfig.json ├── components └── ui │ ├── input.tsx │ ├── button.tsx │ ├── calendar.tsx │ ├── pagination.tsx │ ├── dialog.tsx │ ├── sheet.tsx │ ├── command.tsx │ └── carousel.tsx ├── package.json ├── tailwind.config.ts └── README.md /app/_components/Footer/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/_components/FooterInfo/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/_components/Pagination/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/_components/SpecialtyBox/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/_components/MobileMenu/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/app/favicon.ico -------------------------------------------------------------------------------- /public/doctors.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors.webp -------------------------------------------------------------------------------- /public/doctors1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors1.webp -------------------------------------------------------------------------------- /next.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | export default nextConfig; 5 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: /api/ 3 | Allow: / 4 | 5 | Sitemap: https://yourdomain.com/sitemap.xml 6 | -------------------------------------------------------------------------------- /public/doctor-booking.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctor-booking.webp -------------------------------------------------------------------------------- /public/doctors/doctor1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor1.webp -------------------------------------------------------------------------------- /public/doctors/doctor10.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor10.webp -------------------------------------------------------------------------------- /public/doctors/doctor11.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor11.webp -------------------------------------------------------------------------------- /public/doctors/doctor12.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor12.webp -------------------------------------------------------------------------------- /public/doctors/doctor13.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor13.webp -------------------------------------------------------------------------------- /public/doctors/doctor14.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor14.webp -------------------------------------------------------------------------------- /public/doctors/doctor15.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor15.webp -------------------------------------------------------------------------------- /public/doctors/doctor16.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor16.webp -------------------------------------------------------------------------------- /public/doctors/doctor17.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor17.webp -------------------------------------------------------------------------------- /public/doctors/doctor18.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor18.webp -------------------------------------------------------------------------------- /public/doctors/doctor19.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor19.webp -------------------------------------------------------------------------------- /public/doctors/doctor2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor2.webp -------------------------------------------------------------------------------- /public/doctors/doctor20.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor20.webp -------------------------------------------------------------------------------- /public/doctors/doctor21.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor21.webp -------------------------------------------------------------------------------- /public/doctors/doctor22.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor22.webp -------------------------------------------------------------------------------- /public/doctors/doctor23.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor23.webp -------------------------------------------------------------------------------- /public/doctors/doctor24.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor24.webp -------------------------------------------------------------------------------- /public/doctors/doctor25.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor25.webp -------------------------------------------------------------------------------- /public/doctors/doctor26.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor26.webp -------------------------------------------------------------------------------- /public/doctors/doctor27.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor27.webp -------------------------------------------------------------------------------- /public/doctors/doctor28.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor28.webp -------------------------------------------------------------------------------- /public/doctors/doctor29.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor29.webp -------------------------------------------------------------------------------- /public/doctors/doctor3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor3.webp -------------------------------------------------------------------------------- /public/doctors/doctor30.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor30.webp -------------------------------------------------------------------------------- /public/doctors/doctor31.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor31.webp -------------------------------------------------------------------------------- /public/doctors/doctor32.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor32.webp -------------------------------------------------------------------------------- /public/doctors/doctor33.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor33.webp -------------------------------------------------------------------------------- /public/doctors/doctor34.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor34.webp -------------------------------------------------------------------------------- /public/doctors/doctor35.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor35.webp -------------------------------------------------------------------------------- /public/doctors/doctor36.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor36.webp -------------------------------------------------------------------------------- /public/doctors/doctor37.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor37.webp -------------------------------------------------------------------------------- /public/doctors/doctor38.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor38.webp -------------------------------------------------------------------------------- /public/doctors/doctor39.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor39.webp -------------------------------------------------------------------------------- /public/doctors/doctor4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor4.webp -------------------------------------------------------------------------------- /public/doctors/doctor40.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor40.webp -------------------------------------------------------------------------------- /public/doctors/doctor41.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor41.webp -------------------------------------------------------------------------------- /public/doctors/doctor42.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor42.webp -------------------------------------------------------------------------------- /public/doctors/doctor43.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor43.webp -------------------------------------------------------------------------------- /public/doctors/doctor44.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor44.webp -------------------------------------------------------------------------------- /public/doctors/doctor45.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor45.webp -------------------------------------------------------------------------------- /public/doctors/doctor46.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor46.webp -------------------------------------------------------------------------------- /public/doctors/doctor47.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor47.webp -------------------------------------------------------------------------------- /public/doctors/doctor48.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor48.webp -------------------------------------------------------------------------------- /public/doctors/doctor49.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor49.webp -------------------------------------------------------------------------------- /public/doctors/doctor5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor5.webp -------------------------------------------------------------------------------- /public/doctors/doctor50.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor50.webp -------------------------------------------------------------------------------- /public/doctors/doctor51.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor51.webp -------------------------------------------------------------------------------- /public/doctors/doctor52.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor52.webp -------------------------------------------------------------------------------- /public/doctors/doctor53.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor53.webp -------------------------------------------------------------------------------- /public/doctors/doctor54.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor54.webp -------------------------------------------------------------------------------- /public/doctors/doctor55.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor55.webp -------------------------------------------------------------------------------- /public/doctors/doctor56.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor56.webp -------------------------------------------------------------------------------- /public/doctors/doctor57.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor57.webp -------------------------------------------------------------------------------- /public/doctors/doctor58.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor58.webp -------------------------------------------------------------------------------- /public/doctors/doctor59.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor59.webp -------------------------------------------------------------------------------- /public/doctors/doctor6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor6.webp -------------------------------------------------------------------------------- /public/doctors/doctor60.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor60.webp -------------------------------------------------------------------------------- /public/doctors/doctor7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor7.webp -------------------------------------------------------------------------------- /public/doctors/doctor8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor8.webp -------------------------------------------------------------------------------- /public/doctors/doctor9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/doctors/doctor9.webp -------------------------------------------------------------------------------- /public/heroSlides/slide1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/heroSlides/slide1.webp -------------------------------------------------------------------------------- /public/heroSlides/slide2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/heroSlides/slide2.webp -------------------------------------------------------------------------------- /public/heroSlides/slide3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/mahmoud-saeed1/booking-doctor-appointment/HEAD/public/heroSlides/slide3.webp -------------------------------------------------------------------------------- /app/types/index.ts: -------------------------------------------------------------------------------- 1 | export type TSpecialty = 2 | | "dentist" 3 | | "cardiologist" 4 | | "orthopedic" 5 | | "neurologist" 6 | | "otology" 7 | | "general"; 8 | -------------------------------------------------------------------------------- /app/_components/SectionTitle/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | h1{ 6 | @apply text-4xl font-bold text-center; 7 | } -------------------------------------------------------------------------------- /app/_components/HeroImage/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .hero-image-container { 6 | @apply relative h-full; 7 | } 8 | -------------------------------------------------------------------------------- /app/_components/FooterInfo/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const FooterInof = () => { 4 | return
FooterInof
; 5 | }; 6 | 7 | export default FooterInof; 8 | -------------------------------------------------------------------------------- /app/_components/Header/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | nav { 6 | @apply h-16 flex items-center justify-between sm:h-20; 7 | } -------------------------------------------------------------------------------- /postcss.config.mjs: -------------------------------------------------------------------------------- 1 | /** @type {import('postcss-load-config').Config} */ 2 | const config = { 3 | plugins: { 4 | tailwindcss: {}, 5 | }, 6 | }; 7 | 8 | export default config; 9 | -------------------------------------------------------------------------------- /app/_components/IconContainer/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .icon__container { 6 | @apply flex items-center justify-center w-8 h-8; 7 | } 8 | -------------------------------------------------------------------------------- /app/(routes)/details/layout.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode } from "react"; 2 | 3 | const layout = ({ children }: { children: ReactNode }) => { 4 | return
{children}
; 5 | }; 6 | 7 | export default layout; 8 | -------------------------------------------------------------------------------- /app/_utils/index.ts: -------------------------------------------------------------------------------- 1 | /*~~~~~~~~$ Utility function to wrap the index $~~~~~~~~*/ 2 | export const WrapIndex = (min: number, max: number, v: number) => { 3 | const range = max - min; 4 | return ((((v - min) % range) + range) % range) + min; 5 | }; 6 | 7 | -------------------------------------------------------------------------------- /app/_components/Hero/index.css: -------------------------------------------------------------------------------- 1 | .hero { 2 | @apply relative w-full h-screen overflow-hidden flex items-center justify-center md:flex-row flex-col; 3 | } 4 | 5 | .slides-container{ 6 | @apply absolute inset-0 flex flex-col md:grid md:grid-cols-2 h-full 7 | } -------------------------------------------------------------------------------- /app/_components/SectionTitle/index.tsx: -------------------------------------------------------------------------------- 1 | import { ISectionTilel } from "@/app/_interfaces"; 2 | import "./index.css"; 3 | 4 | const SectionTitle = ({ className, title, children }: ISectionTilel) => { 5 | return

SectionTitle

; 6 | }; 7 | 8 | export default SectionTitle; 9 | -------------------------------------------------------------------------------- /app/(routes)/details/_components/ErrorMessage/index.tsx: -------------------------------------------------------------------------------- 1 | // ErrorMessage.tsx 2 | const ErrorMessage = ({ message }: { message: string }) => { 3 | return message ?

{message}

: null; 4 | }; 5 | 6 | export default ErrorMessage; 7 | -------------------------------------------------------------------------------- /app/_components/ui/LinkButton/index.css: -------------------------------------------------------------------------------- 1 | .link{ 2 | @apply bg-blue-700 px-4 py-3 text-white font-bold mt-4 rounded-[0.5rem] tracking-wider hover:ring-primary capitalize hover:ring-2 hover:bg-white hover:text-blue-700 hover:tracking-widest transition-all duration-300 ease-in-out 3 | } -------------------------------------------------------------------------------- /app/(routes)/details/_components/ContactInfo/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .contact-info { 6 | @apply flex flex-col md:flex-row md:items-center; 7 | } 8 | 9 | .contact-info__item { 10 | @apply text-gray-700 mb-2 md:mb-0 md:mr-4; 11 | } 12 | -------------------------------------------------------------------------------- /app/_components/IconContainer/index.tsx: -------------------------------------------------------------------------------- 1 | import { IIconsContainer } from "@/app/_interfaces"; 2 | import "./index.css"; 3 | 4 | const IconContainer = ({ className, children }: IIconsContainer) => { 5 | return
{children}
; 6 | }; 7 | 8 | export default IconContainer; 9 | -------------------------------------------------------------------------------- /next-sitemap.config.ts: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | siteUrl: 'https://your-website.com', 3 | generateRobotsTxt: true, 4 | exclude: ['/server-sitemap.xml'], 5 | robotsTxtOptions: { 6 | policies: [ 7 | { 8 | userAgent: '*', 9 | allow: '/', 10 | }, 11 | ], 12 | }, 13 | }; -------------------------------------------------------------------------------- /app/_components/PaginatedContent/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .paginated-content { 6 | @apply mt-40 grid grid-cols-6 gap-y-28 gap-x-0 place-items-center sm:gap-x-14 xl:gap-y-40; 7 | } 8 | 9 | .paginated-content__item { 10 | @apply col-span-6 sm:col-span-3 lg:col-span-2; 11 | } 12 | -------------------------------------------------------------------------------- /app/_components/DoctorCardFooter/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .card__button { 6 | @apply bg-primary py-2 text-sm text-white text-center uppercase font-bold tracking-wider rounded-full hover:ring-primary hover:ring-2 hover:bg-white hover:text-primary transition-all duration-200 ease-in-out; 7 | } 8 | -------------------------------------------------------------------------------- /app/(routes)/details/[recordId]/index.css: -------------------------------------------------------------------------------- 1 | .image__container{ 2 | @apply bg-white w-32 h-32 rounded-full ring-blue-900 ring-2 flex items-center justify-center 3 | } 4 | 5 | .image__container--in{ 6 | @apply bg-primary w-[6.5rem] h-[6.5rem] rounded-full overflow-hidden 7 | } 8 | 9 | .doctor__card img{ 10 | @apply w-full h-full object-cover; 11 | } -------------------------------------------------------------------------------- /app/metadata.ts: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | 3 | export const metadata: Metadata = { 4 | title: "Doctor Appointments", 5 | description: 6 | "Easily book appointments with our top doctors and specialists. Choose your preferred date, time, and doctor, and confirm your booking instantly. Convenient, fast, and secure online appointment scheduling.", 7 | }; 8 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | 8 | export const sliceText = (text: string, length: number = 100) => { 9 | if (text.length <= length) return text; 10 | return `${text.slice(0, length)}`; 11 | }; 12 | -------------------------------------------------------------------------------- /app/_components/DoctorCardFooter/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC, ReactNode } from "react"; 2 | import Link from "next/link"; 3 | 4 | const DoctorCardFooter: FC<{ doctorID: string; children?: ReactNode }> = ({ 5 | doctorID, 6 | children, 7 | }) => ( 8 | 9 | {children} 10 | book now 11 | 12 | ); 13 | 14 | export default DoctorCardFooter; 15 | -------------------------------------------------------------------------------- /app/_components/ui/LinkButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { ILinkButton } from "@/app/_interfaces"; 3 | import Link from "next/link"; 4 | import "./index.css"; 5 | 6 | const LinkButton = ({ className, label, path }: ILinkButton) => { 7 | return ( 8 | 9 | {label} 10 | 11 | ); 12 | }; 13 | 14 | export default LinkButton; 15 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 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 | } -------------------------------------------------------------------------------- /app/(routes)/details/_components/Button/index.tsx: -------------------------------------------------------------------------------- 1 | // Button.tsx 2 | const Button = ({ type, children }: { type: "button" | "submit" | "reset", children: React.ReactNode }) => { 3 | return ( 4 | 10 | ); 11 | }; 12 | 13 | export default Button; 14 | -------------------------------------------------------------------------------- /app/_components/DoctorCardImage/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .image__container--outer { 6 | @apply absolute left-1/2 -top-[22%] -translate-x-1/2 bg-white w-48 h-48 rounded-full ring-blue-900 ring-2 flex items-center justify-center overflow-hidden; 7 | } 8 | 9 | .image__container--inner { 10 | @apply bg-primary w-40 h-40 rounded-full overflow-hidden; 11 | } 12 | 13 | .doctor__image { 14 | @apply w-full h-full object-cover; 15 | } 16 | -------------------------------------------------------------------------------- /public/SVGs/search.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /app/_components/HeroContent/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .hero-content-container { 6 | @apply max-h-[60%] flex items-center justify-center p-8 md:max-h-[100%] md:bg-none md:p-16 text-center md:text-left; 7 | } 8 | .hero-text { 9 | @apply space-y-8 max-w-lg md:space-y-10; 10 | } 11 | .hero-title{ 12 | @apply text-4xl md:text-6xl font-bold lg:leading-[4.5rem] 13 | } 14 | .hero-paragraph{ 15 | @apply text-lg text-gray-600 md:text-xl lg:leading-8 16 | } 17 | -------------------------------------------------------------------------------- /app/(routes)/details/_components/DoctorImage/index.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import "./index.css"; 3 | 4 | /*~~~~~~~~$ DoctorImage Component $~~~~~~~~*/ 5 | const DoctorImage = ({ image, name }: { image: string; name: string }) => { 6 | return ( 7 |
8 |
9 | {name} 10 |
11 |
12 | ); 13 | }; 14 | 15 | export default DoctorImage; 16 | -------------------------------------------------------------------------------- /app/_components/HeroNavigation/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .hero-navigation-container { 6 | @apply absolute left-1/2 transform -translate-x-1/2 hidden md:flex md:flex-col md:space-y-2 z-30; 7 | } 8 | 9 | .hero-nav-button { 10 | @apply bg-white text-black p-2 rounded-full shadow-lg mx-2; 11 | } 12 | 13 | .hero-nav-button{ 14 | width: 3rem !important; 15 | height: 3rem !important; 16 | border-radius: 50% !important; 17 | background-color: #1d4ed8 !important; 18 | } -------------------------------------------------------------------------------- /app/(routes)/search/_components/CategoryList/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .categoires__section{ 6 | @apply h-screen mt-5 p-4 flex flex-col overflow-visible 7 | } 8 | 9 | .categoreis__container{ 10 | @apply flex flex-col space-y-2 11 | } 12 | 13 | .category{ 14 | @apply w-full p-2 flex items-center space-x-2 cursor-pointer rounded-[0.3rem] hover:bg-slate-300 transition-all duration-200 ease-in-out 15 | } 16 | 17 | p{ 18 | @apply text-primary capitalize 19 | } 20 | -------------------------------------------------------------------------------- /app/_components/Logo/index.tsx: -------------------------------------------------------------------------------- 1 | import IconContainer from "@/app/_components/IconContainer"; 2 | import { AppLogo } from "@/app/_icons"; 3 | import Link from "next/link"; 4 | import React from "react"; 5 | 6 | const Logo = ({ className = "" }: { className?: string }) => { 7 | return ( 8 | 9 | 10 | 11 | 12 | 13 | ); 14 | }; 15 | 16 | export default Logo; 17 | -------------------------------------------------------------------------------- /app/(routes)/details/_components/DoctorImage/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .doctor-image { 6 | @apply bg-white w-48 h-48 rounded-full ring-blue-900 ring-2 flex items-center justify-center sm:w-52 sm:h-52 md:min-w-56 md:min-h-56 lg:w-64 lg:h-64; 7 | } 8 | 9 | .doctor-image__inner { 10 | @apply bg-primary w-40 h-40 rounded-full overflow-hidden sm:w-44 sm:h-44 md:w-48 md:h-48 lg:w-56 lg:h-56; 11 | } 12 | 13 | .doctor-image__img { 14 | @apply w-full h-full object-cover; 15 | } 16 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /app/_components/PaginatedContent/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./index.css"; 3 | 4 | interface PaginatedContentProps { 5 | data: T[]; 6 | component: (item: T) => JSX.Element; 7 | } 8 | 9 | const PaginatedContent = ({ data, component }: PaginatedContentProps) => { 10 | return ( 11 |
12 | {data.map((item, index) => ( 13 |
14 | {component(item)} 15 |
16 | ))} 17 |
18 | ); 19 | }; 20 | 21 | export default PaginatedContent; 22 | -------------------------------------------------------------------------------- /app/_components/PaginationControls/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .pagination-controls { 6 | @apply flex items-center justify-center space-x-3 mt-16; 7 | } 8 | 9 | .pagination-controls__button { 10 | @apply bg-blue-500 text-white rounded-full p-2 hover:bg-blue-600 transition-colors; 11 | } 12 | 13 | .pagination-controls__ellipsis { 14 | @apply bg-gray-300 text-gray-700 rounded-full px-3 py-1; 15 | } 16 | 17 | .pagination-controls__button{ 18 | width: 3rem !important; 19 | height: 3rem !important; 20 | border-radius: 50% !important; 21 | } 22 | -------------------------------------------------------------------------------- /app/_components/GategorySearch/index.tsx: -------------------------------------------------------------------------------- 1 | import Categories from "../Categories"; 2 | import CategorySearchBox from "../CategorySearchBox"; 3 | import "./index.css"; 4 | import { ISearch } from "@/app/_interfaces"; 5 | 6 | const GategorySearch = ({ searchTerm, setSearchTermHandler }: ISearch) => { 7 | return ( 8 |
9 | 13 | 14 | 15 |
16 | ); 17 | }; 18 | 19 | export default GategorySearch; 20 | -------------------------------------------------------------------------------- /app/_components/PageButton/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .page-button { 6 | @apply px-3 py-1 rounded-full transition-colors; 7 | } 8 | 9 | .page-button--active { 10 | @apply bg-blue-500 text-white; 11 | } 12 | 13 | .page-button--inactive { 14 | @apply bg-gray-100 text-white; 15 | } 16 | 17 | .page-button:hover { 18 | @apply bg-blue-400 text-white; 19 | } 20 | 21 | 22 | .page-button{ 23 | width: 2rem !important; 24 | height: 2rem !important; 25 | border-radius: 50% !important; 26 | color: #fff !important; 27 | } -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /app/_components/PageButton/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button } from "@/components/ui/button"; 3 | import "./index.css"; 4 | 5 | interface PageButtonProps { 6 | page: number; 7 | currentPage: number; 8 | onPageChange: (page: number) => void; 9 | } 10 | 11 | const PageButton: React.FC = ({ page, currentPage, onPageChange }) => { 12 | return ( 13 | 19 | ); 20 | }; 21 | 22 | export default PageButton; 23 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .custom-scrollbar::-webkit-scrollbar { 6 | @apply w-3; 7 | } 8 | 9 | .custom-scrollbar::-webkit-scrollbar-track { 10 | @apply bg-gray-200; 11 | } 12 | 13 | .custom-scrollbar::-webkit-scrollbar-thumb { 14 | @apply bg-blue-500 rounded-md border-2 border-gray-200 hover:bg-blue-700; 15 | } 16 | 17 | .custom-scrollbar::-webkit-scrollbar-corner { 18 | @apply bg-gray-200; 19 | } 20 | 21 | .container { 22 | @apply px-4 py-8 md:px-8 lg:px-60 xl:px-60 ; 23 | } 24 | .doctor__card--shadow{ 25 | box-shadow: 12px 12px 1px rgb(0, 0, 0); 26 | } 27 | 28 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "lib": ["dom", "dom.iterable", "esnext"], 4 | "allowJs": true, 5 | "skipLibCheck": true, 6 | "strict": true, 7 | "noEmit": true, 8 | "esModuleInterop": true, 9 | "module": "esnext", 10 | "moduleResolution": "bundler", 11 | "resolveJsonModule": true, 12 | "isolatedModules": true, 13 | "jsx": "preserve", 14 | "incremental": true, 15 | "plugins": [ 16 | { 17 | "name": "next" 18 | } 19 | ], 20 | "paths": { 21 | "@/*": ["./*"] 22 | } 23 | }, 24 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 25 | "exclude": ["node_modules"] 26 | } 27 | -------------------------------------------------------------------------------- /app/(routes)/details/_ui/FormButton.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | interface FormButtonProps { 4 | type: "button" | "submit" | "reset"; 5 | label: string; 6 | } 7 | 8 | const FormButton: React.FC = ({ type, label }) => ( 9 | 12 | ); 13 | 14 | export default FormButton; 15 | -------------------------------------------------------------------------------- /app/_animation/index.ts: -------------------------------------------------------------------------------- 1 | /*~~~~~~~~$ Hero Animation Variants $~~~~~~~~*/ 2 | export const contentVariants = { 3 | hidden: { opacity: 0, x: 100 }, 4 | visible: (i: number) => ({ 5 | opacity: 1, 6 | x: 0, 7 | transition: { delay: i * 0.2, duration: 0.8 }, 8 | }), 9 | exit: { opacity: 0, x: 100, transition: { duration: 0.5 } }, 10 | }; 11 | 12 | export const imageVariants = { 13 | hidden: { opacity: 0, x: -100 }, 14 | visible: { opacity: 1, x: 0 }, 15 | exit: { opacity: 0, x: 100 }, 16 | }; 17 | 18 | /*~~~~~~~~$ Doctor Card $~~~~~~~~*/ 19 | export const VDoctorCard = { 20 | hidden: { opacity: 0, y: 50 }, 21 | visible: { opacity: 1, y: 0, transition: { duration: 0.5 } }, 22 | }; 23 | -------------------------------------------------------------------------------- /app/(routes)/details/_components/DoctorBody/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .doctor-body { 6 | @apply text-center md:text-left; 7 | } 8 | 9 | .doctor-body__specialty-box { 10 | @apply mt-4 mb-2 flex items-center justify-center md:mt-0 md:mb-4 md:justify-start md:space-x-2; 11 | } 12 | 13 | .doctor-body__icon { 14 | @apply w-10 h-10; 15 | } 16 | 17 | .doctor-body__specialty { 18 | @apply text-2xl text-primary font-semibold capitalize; 19 | } 20 | 21 | .doctor-body__name { 22 | @apply text-3xl mt-6 font-bold text-blue-700 mb-2; 23 | } 24 | 25 | .doctor-body__about { 26 | @apply text-gray-700 mb-4; 27 | } 28 | -------------------------------------------------------------------------------- /app/_components/HeroImage/index.tsx: -------------------------------------------------------------------------------- 1 | import { motion } from "framer-motion"; 2 | import Image from "next/image"; 3 | import { IHeroImageProps } from "@/app/_interfaces"; 4 | import { imageVariants } from "@/app/_animation"; 5 | import "./index.css"; 6 | 7 | const HeroImage: React.FC = ({ imageSrc, altText }) => ( 8 | 15 | {altText} 22 | 23 | ); 24 | 25 | export default HeroImage; 26 | -------------------------------------------------------------------------------- /app/_components/Categories/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .categories__contianer { 6 | @apply grid grid-cols-6 gap-4 items-center justify-center md:px-[4.5rem] ; 7 | } 8 | 9 | .category__card { 10 | @apply bg-blue-50 h-24 p-10 col-span-2 flex flex-col items-center justify-center space-y-2 rounded-[0.5rem] hover:scale-110 duration-300 transition-all ease-in-out sm:h-32 sm:space-y-4 md:h-40 lg:col-span-1 xl:h-32; 11 | } 12 | 13 | .category__card p { 14 | @apply text-primary text-center text-sm font-bold capitalize sm:text-xl sm:tracking-wider md:text-2xl lg:text-xl; 15 | } 16 | 17 | .icon__container--category { 18 | @apply w-14 h-14 sm:w-28 sm:h-28 lg:w-28 lg:h-28; 19 | } -------------------------------------------------------------------------------- /app/(routes)/details/_components/SuggestedDoctors/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .suggested-doctors { 6 | @apply bg-white rounded-xl p-6 w-screen relative lg:w-full md:mt-16; 7 | } 8 | 9 | .suggested-doctors__title { 10 | @apply absolute top-1 bg-white px-1 text-xl md:text-2xl font-bold text-blue-900 tracking-wider z-20; 11 | } 12 | 13 | .suggested-doctors__carousel { 14 | @apply relative py-6 flex items-center -translate-x-10 gap-x-5 border-t-[3px] border-b-[3px] border-blue-900 whitespace-nowrap overflow-x-scroll overflow-y-hidden scrollbar-none scroll-smooth md:translate-x-0 lg:scrollbar-thin lg:scrollbar-thumb-blue-600 lg:scrollbar-track-blue-200; 15 | } 16 | -------------------------------------------------------------------------------- /app/(routes)/details/_components/SuggestedDoctors/index.tsx: -------------------------------------------------------------------------------- 1 | import { IDoctorData } from "@/app/_interfaces"; 2 | import DoctorSmallCard from "../DoctorSmallCard"; 3 | import "./index.css"; 4 | 5 | const SuggestedDoctors = ({ 6 | suggestedDoctors, 7 | }: { 8 | suggestedDoctors: IDoctorData[]; 9 | }) => { 10 | /*~~~~~~~~$ Renders $~~~~~~~~*/ 11 | const doctorsRender = suggestedDoctors.map((doctor) => ( 12 | 13 | )); 14 | return ( 15 |
16 |

Suggested Doctors

17 |
{doctorsRender}
18 |
19 | ); 20 | }; 21 | 22 | export default SuggestedDoctors; 23 | -------------------------------------------------------------------------------- /app/_components/DoctorCardImage/index.tsx: -------------------------------------------------------------------------------- 1 | import { FC } from "react"; 2 | import Image from "next/image"; 3 | import "./index.css"; 4 | 5 | interface DoctorCardImageProps { 6 | className?: string; 7 | image: string; 8 | name: string; 9 | } 10 | 11 | const DoctorCardImage: FC = ({ 12 | image, 13 | name, 14 | className, 15 | }) => ( 16 |
17 |
18 | {image && ( 19 | {name} 26 | )} 27 |
28 |
29 | ); 30 | 31 | export default DoctorCardImage; 32 | -------------------------------------------------------------------------------- /app/(routes)/appointments/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .appointment-list { 6 | @apply max-w-7xl mx-auto p-4; 7 | } 8 | 9 | .appointment-list__title { 10 | @apply text-2xl font-bold mb-4; 11 | } 12 | 13 | .appointment-list__table-container { 14 | @apply overflow-x-auto; 15 | } 16 | 17 | .appointment-list__table { 18 | @apply min-w-full bg-white shadow-md rounded-lg; 19 | } 20 | 21 | .appointment-list__table th, 22 | .appointment-list__table td { 23 | @apply border px-4 py-2 text-left; 24 | } 25 | 26 | .appointment-list__table th { 27 | @apply bg-blue-200 font-bold; 28 | } 29 | 30 | .appointment-list__row:nth-child(even) { 31 | @apply bg-blue-50; 32 | } 33 | -------------------------------------------------------------------------------- /app/_components/SpecialtyBox/index.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import IconContainer from "@/app/_components/IconContainer"; 3 | import { CategoriesIcons } from "@/app/_data"; 4 | import { ISpecialtyBoxProps } from "@/app/_interfaces"; 5 | 6 | const SpecialtyBox = ({ 7 | doctorSpecialty, 8 | className = "", 9 | }: ISpecialtyBoxProps) => { 10 | const SpecialtyIcon = CategoriesIcons.find( 11 | (icon) => icon.label === doctorSpecialty 12 | )?.icon; 13 | 14 | return ( 15 |
16 | 17 | {SpecialtyIcon && } 18 | 19 |

{doctorSpecialty}

20 |
21 | ); 22 | }; 23 | 24 | export default SpecialtyBox; 25 | -------------------------------------------------------------------------------- /app/_components/Categories/index.tsx: -------------------------------------------------------------------------------- 1 | import IconContainer from "../IconContainer"; 2 | import { CategoriesIcons } from "@/app/_data"; 3 | import Link from "next/link"; 4 | import "./index.css"; 5 | 6 | const Categories = () => { 7 | return ( 8 |
9 | {CategoriesIcons.map(({ icon: Icon, label }, index) => ( 10 | 11 | 12 | 13 | 14 |

{label}

15 | 16 | ))} 17 |
18 | ); 19 | }; 20 | 21 | export default Categories; 22 | -------------------------------------------------------------------------------- /app/(routes)/details/_components/ContactInfo/index.tsx: -------------------------------------------------------------------------------- 1 | import { IDoctorData } from "@/app/_interfaces"; 2 | import "./index.css"; 3 | /*~~~~~~~~$ ContactInfo Component $~~~~~~~~*/ 4 | const ContactInfo = ({ doctorData }: { doctorData: IDoctorData }) => { 5 | return ( 6 |
7 |

8 | Address: 9 | {doctorData.address} 10 |

11 |

12 | Phone: 13 | {doctorData.phone} 14 |

15 |

16 | Experience: {doctorData.yearsOfExperience} years 17 |

18 |
19 | ); 20 | }; 21 | 22 | export default ContactInfo; 23 | -------------------------------------------------------------------------------- /app/_components/HeroNavigation/index.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from "@/components/ui/button"; 2 | import { Arrow } from "@/app/_icons"; 3 | import IconContainer from "../IconContainer"; 4 | import { IHeroNavigationProps } from "@/app/_interfaces"; 5 | import "./index.css"; 6 | 7 | const HeroNavigation: React.FC = ({ onPrev, onNext }) => ( 8 |
9 | 14 | 19 |
20 | ); 21 | 22 | export default HeroNavigation; 23 | -------------------------------------------------------------------------------- /app/(routes)/details/_ui/FormField.tsx: -------------------------------------------------------------------------------- 1 | import React, { ChangeEvent } from "react"; 2 | import ErrorMessage from "../_components/ErrorMessage"; 3 | import { FormFieldProps } from "@/app/_interfaces"; 4 | 5 | const FormField: React.FC = ({ 6 | id, 7 | name, 8 | label, 9 | type, 10 | value, 11 | onChange, 12 | error, 13 | }) => ( 14 |
15 | 18 | 26 | 27 |
28 | ); 29 | 30 | export default FormField; 31 | -------------------------------------------------------------------------------- /app/_components/DoctorCardContent/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .card__content { 6 | @apply mt-auto flex flex-col items-center justify-center; 7 | } 8 | 9 | .card__content h3 { 10 | @apply mt-3 text-xl text-black text-center font-bold tracking-wider whitespace-nowrap; 11 | } 12 | 13 | .card__content p { 14 | @apply text-blue-900 font-semibold capitalize; 15 | } 16 | 17 | .card__content > p:last-child { 18 | @apply text-gray-600 font-normal inline-block whitespace-pre-line text-center; 19 | } 20 | 21 | .specialty-box { 22 | @apply flex items-end justify-center translate-y-4; 23 | } 24 | 25 | .specialty-box h2 { 26 | @apply text-primary text-lg font-semibold capitalize tracking-wider; 27 | } 28 | 29 | .more__button { 30 | @apply bg-none border-none text-primary cursor-pointer translate-x-1; 31 | } 32 | 33 | .icon__container{ 34 | @apply w-6 h-6 35 | } -------------------------------------------------------------------------------- /components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | export interface InputProps 6 | extends React.InputHTMLAttributes {} 7 | 8 | const Input = React.forwardRef( 9 | ({ className, type, ...props }, ref) => { 10 | return ( 11 | 20 | ) 21 | } 22 | ) 23 | Input.displayName = "Input" 24 | 25 | export { Input } 26 | -------------------------------------------------------------------------------- /app/(routes)/details/_components/AppointmentDialog/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | .appointment-dialog__trigger { 6 | @apply bg-primary px-4 py-2 rounded-lg text-white mt-4 text-lg font-bold tracking-wider capitalize hover:bg-transparent hover:ring-2 hover:ring-primary hover:text-primary hover:tracking-widest transition-all duration-200 ease-in-out; 7 | } 8 | 9 | /* Custom styles for the appointment dialog */ 10 | .appointment-dialog__trigger { 11 | padding: 8px 16px; 12 | background-color: #4f46e5; 13 | color: white; 14 | cursor: pointer; 15 | } 16 | 17 | .time-slot-btn { 18 | padding: 8px; 19 | border: 1px solid #d1d5db; 20 | border-radius: 4px; 21 | cursor: pointer; 22 | text-align: center; 23 | } 24 | 25 | .time-slot-btn.selected { 26 | background-color: #4f46e5; 27 | color: white; 28 | } 29 | 30 | .time-slot-btn:hover { 31 | background-color: #6366f1; 32 | color: white; 33 | } 34 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | 3 | import { Inter } from "next/font/google"; 4 | import Header from "./_components/Header"; 5 | import Footer from "./_components/Footer"; 6 | import "./globals.css"; 7 | import { MenuFavoriteProvider } from "./_context/MenuFavoriteContext"; 8 | 9 | const inter = Inter({ subsets: ["latin"] }); 10 | 11 | export default function RootLayout({ 12 | children, 13 | }: { 14 | children: React.ReactNode; 15 | }) { 16 | return ( 17 | 18 | 22 | Booking-Appointment 23 | 24 | 25 |
26 | {children} 27 |