finish design doctor item & change basic responsive style

app/component/Logo.js

@@ -0,0 +1,21 @@
+import Image from 'next/image'
+import Link from 'next/link'
+import React from 'react'
+
+function Logo() {
+    return (
+        <Link href='/'>
+            <div className="flex items-center justify-start gap-[5px]">
+                <Image
+                    src='/assets/images/logo.png'
+                    width={30}
+                    height={30}
+                    alt="logo"
+                />
+                <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
+            </div>
+        </Link>
+    )
+}
+
+export default Logo

app/globals.css

@@ -121,6 +121,24 @@ body {
     background: #FAFAFA;
 }
 
+/* Scroll */
+
+::-webkit-scrollbar {
+    width: 7px;
+}
+
+::-webkit-scrollbar-track {
+    background: #F1F1F1;
+    height: 50px;
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+    background: #C1C1C1;
+    height: 50px;
+    border-radius: 20px;
+}
+
 .font-kalame {
     font-family: kalame;
 }
@@ -174,6 +192,9 @@ body {
 }
 
 .padding-responsive {
+    max-width: 1440px;
+    margin-left: auto;
+    margin-right: auto;
     padding-left: 24px;
     padding-right: 24px;
 }

components/doctor/appointmentList/AppointmentList.js

@@ -1,7 +0,0 @@
-function AppointmentList() {
-    return (
-        <div className="w-[40%]">AppointmentList</div>
-    )
-}
-
-export default AppointmentList

components/doctor/appointmentList/ItemAppointment.js

@@ -0,0 +1,42 @@
+import ArrowLeftD from '@/components/icons/ArrowLeftD'
+import ClockTurn from '@/components/icons/ClockTurn'
+import GreenCalendarTurn from '@/components/icons/GreenCalendarTurn'
+import LocationTurn from '@/components/icons/LocationTurn'
+import { Button } from '@mui/material'
+import React from 'react'
+
+function ItemAppointment({ turn }) {
+    return (
+        <li
+            key={turn.id}
+            className='py-4 w-full px-6 bg-[#FFF] border border-solid border-[#EFEFEF] rounded-lg'
+        >
+            <p className='text-[#3B3B3B] text-[20px] font-bold'>نوبت دهی</p>
+            <div className='flex flex-col items-start justify-center mt-6 gap-6'>
+                <div className='flex items-center justify-start gap-1'>
+                    <LocationTurn />
+                    <p className='text-[#525252] text-[14px] font-normal'>آدرس: {turn.location}</p>
+                </div>
+                <div className='flex items-center justify-start gap-1'>
+                    <ClockTurn />
+                    <p className='text-[#525252] text-[14px] font-normal'>ساعت کاری: {turn.hours_of_work}</p>
+                </div>
+            </div>
+            <div className='flex mt-6 items-center justify-between'>
+                <div className='flex items-center justify-start gap-1'>
+                    <GreenCalendarTurn />
+                    <p className='text-[#05BA58] text-[12px] font-medium'>اولین نوبت آزاد: {turn.first_free_turn}</p>
+                </div>
+                <Button
+                    variant='contained'
+                    className='!py-2 !px-6 gap-1'
+                >
+                    دریافت نوبت
+                    <ArrowLeftD />
+                </Button>
+            </div>
+        </li>
+    )
+}
+
+export default ItemAppointment

components/doctor/appointmentList/index.js

@@ -0,0 +1,17 @@
+import turns from '@/data/turns.json';
+import ItemAppointment from './ItemAppointment';
+
+function AppointmentList() {
+    return (
+        <ul className="w-[40%] flex flex-col justify-start items-center gap-8">
+            {turns.map(item => (
+                <ItemAppointment
+                    turn={item}
+                    key={item.id}
+                />
+            ))}
+        </ul>
+    )
+}
+
+export default AppointmentList

components/doctor/detailDoctor/cards/comments/commentUser/index.js

@@ -1,6 +1,6 @@
 'use client';
 import { useState } from 'react';
-import ItemUser from './Item'
+import ItemUser from './ItemUser'
 
 function CommentUser({ doctor }) {
 

components/doctor/index.js

@@ -1,4 +1,4 @@
-import AppointmentList from "./appointmentList/AppointmentList"
+import AppointmentList from "./appointmentList"
 import DetailDoctor from "./detailDoctor"
 
 function DoctorPage({ doctor }) {

components/home/index.js

@@ -7,17 +7,19 @@ import FrequentSearches from "./FrequentSearches";
 
 function HomePage() {
     return (
-        <div className="bg-banner-home padding-responsive pt-[120px] min-h-screen !bg-center !bg-no-repeat !bg-cover flex items-center justify-center flex-col gap-[64px]">
-            <div>
-                <p className="text-[#D15B56] text-center font-kalame text-[32px] font-bold">نوبت ۷۲۴</p>
-                <p className="text-[#525252] text-center mt-2.5 font-kalame text-[36px] font-bold flex items-center gap-3">
-                    <BText />
-                    میتونی آنلاین نوبت بگیری!
-                    <AText />
-                </p>
+        <div className="bg-banner-home !bg-center !bg-no-repeat !bg-cover">
+            <div className="padding-responsive min-h-screen pt-[120px] flex items-center justify-center flex-col gap-[64px]">
+                <div>
+                    <p className="text-[#D15B56] text-center font-kalame text-[32px] font-bold">نوبت ۷۲۴</p>
+                    <p className="text-[#525252] text-center mt-2.5 font-kalame text-[36px] font-bold flex items-center gap-3">
+                        <BText />
+                        میتونی آنلاین نوبت بگیری!
+                        <AText />
+                    </p>
+                </div>
+                <SearchBar />
+                <FrequentSearches />
             </div>
-            <SearchBar />
-            <FrequentSearches />
         </div>
     )
 }

components/icons/ClockTurn.js

@@ -0,0 +1,10 @@
+function ClockTurn() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
+            <path d="M18.3337 10.5C18.3337 15.1 14.6003 18.8333 10.0003 18.8333C5.40033 18.8333 1.66699 15.1 1.66699 10.5C1.66699 5.9 5.40033 2.16666 10.0003 2.16666C14.6003 2.16666 18.3337 5.9 18.3337 10.5Z" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M13.0914 13.15L10.5081 11.6083C10.0581 11.3417 9.69141 10.7 9.69141 10.175V6.75833" stroke="#7E7E7E" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default ClockTurn

components/icons/GreenCalendarTurn.js

@@ -0,0 +1,18 @@
+function GreenCalendarTurn() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
+            <path d="M6.66699 1.66667V4.16667" stroke="#05BA58" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M13.333 1.66667V4.16667" stroke="#05BA58" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M2.91699 7.575H17.0837" stroke="#05BA58" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M17.5 7.08333V14.1667C17.5 16.6667 16.25 18.3333 13.3333 18.3333H6.66667C3.75 18.3333 2.5 16.6667 2.5 14.1667V7.08333C2.5 4.58333 3.75 2.91667 6.66667 2.91667H13.3333C16.25 2.91667 17.5 4.58333 17.5 7.08333Z" stroke="#05BA58" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M13.0791 11.4167H13.0866" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M13.0791 13.9167H13.0866" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M9.99607 11.4167H10.0036" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M9.99607 13.9167H10.0036" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M6.91209 11.4167H6.91957" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+            <path d="M6.91209 13.9167H6.91957" stroke="#05BA58" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+        </svg>
+    )
+}
+
+export default GreenCalendarTurn

components/icons/LocationTurn.js

@@ -0,0 +1,10 @@
+function LocationTurn() {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="21" viewBox="0 0 20 21" fill="none">
+            <path d="M10.0004 11.6917C11.4363 11.6917 12.6004 10.5276 12.6004 9.09167C12.6004 7.65573 11.4363 6.49167 10.0004 6.49167C8.56445 6.49167 7.40039 7.65573 7.40039 9.09167C7.40039 10.5276 8.56445 11.6917 10.0004 11.6917Z" stroke="#7E7E7E" stroke-width="1.5" />
+            <path d="M3.01675 7.57501C4.65842 0.35834 15.3501 0.366674 16.9834 7.58334C17.9417 11.8167 15.3084 15.4 13.0001 17.6167C11.3251 19.2333 8.67508 19.2333 6.99175 17.6167C4.69175 15.4 2.05842 11.8083 3.01675 7.57501Z" stroke="#7E7E7E" stroke-width="1.5" />
+        </svg>
+    )
+}
+
+export default LocationTurn

components/layout/Footer.js

@@ -8,6 +8,7 @@ import Link from "next/link";
 import LocationF from "../icons/LocationF";
 import CalendarAddF from "../icons/CalendarAddF";
 import StethoscopeF from "../icons/StethoscopeF";
+import Logo from "@/app/component/Logo";
 
 const socialMedias = [
     <Linkedin />,
@@ -44,15 +45,7 @@ function Footer() {
                 {/* Right */}
                 <div className="flex gap-[30px] flex-col items-start">
                     {/* Icon */}
-                    <div className="flex items-center justify-start gap-[5px]">
-                        <Image
-                            alt="logo"
-                            width={30}
-                            height={30}
-                            src='/assets/images/logo.png'
-                        />
-                        <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
-                    </div>
+                    <Logo />
                     <p
                         className="text-[#616161] text-[14px] font-normal"
                     >724 یک وبسایت نوبت دهی آنلاین می باشد که<br /> بستری آسان برای پزشکان و بیماران فراهم کرده<br /> است.     </p>

components/layout/Header.js

@@ -1,6 +1,6 @@
+import Logo from "@/app/component/Logo";
 import { listNav } from "@/constans";
 import { Button } from "@mui/material";
-import Image from "next/image";
 import Link from "next/link";
 
 function Header() {
@@ -9,15 +9,7 @@ function Header() {
             className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
         >
             <div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
-                <div className="flex items-center justify-start gap-[5px]">
-                    <Image
-                        src='/assets/images/logo.png'
-                        width={30}
-                        height={30}
-                        alt="logo"
-                    />
-                    <p className="text-[#526CAC] text-[16px] font-bold font-kalame">نوبت ۷۲۴</p>
-                </div>
+                <Logo />
                 <ul className="flex items-center justify-center gap-10">
                     {listNav.map(nav => (
                         <li

components/layout/index.js

@@ -8,7 +8,7 @@ function Layout({ children, title }) {
                 <title>{`${title} | نوبت ۷۲۴`}</title>
             </head> */}
             <main className="w-full min-h-screen">
-                <header className="w-full fixed top-10 right-0 padding-responsive z-[10]">
+                <header className="w-full fixed top-10 right-1/2 translate-x-1/2 padding-responsive z-[10]">
                     <Header />
                 </header>
                 <section>

data/turns.json

@@ -0,0 +1,53 @@
+[
+    {
+        "id": 1,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    },{
+        "id": 2,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    },{
+        "id": 3,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    },{
+        "id": 4,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    },{
+        "id": 5,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    },{
+        "id": 6,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    },{
+        "id": 7,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    },{
+        "id": 8,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    },{
+        "id": 9,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    },{
+        "id": 10,
+        "location": "اهواز، کیانپارس، پهلوان شرقی، مجتمع پزشکی آویسا، واحد ۱۲",
+        "hours_of_work": "شنبه تا سه شنبه ساعت 16 تا 22",
+        "first_free_turn": "یکشنبه 24 اردیبهشت"
+    }
+]