design page booking & add page loginverify

app/component/date/dateTime/Hours.js

@@ -0,0 +1,31 @@
+import { Button } from "@mui/material";
+
+function Hours({ doctor, hour, setHour, value, nameHours }) {
+    return (
+        <ul
+            className="grid grid-cols-6 gap-x-[16px] gap-y-[24px] mt-[24px] mb-[40px]"
+        >
+            {doctor[nameHours[value]].map((item, idx) => (
+                <li
+                    key={idx}
+                >
+                    <Button
+                        onClick={() => setHour(idx)}
+                        className={`
+                        !w-full !rounded-[8px] !grid !place-items-center !bg-[#EFEFEF] !py-[10px] !px-[14px]
+                        ${idx === hour ? '!bg-[#F79463] ' : ''}
+                    `}
+                    >
+                        <p className={`
+                        text-[16px] font-semibold
+                        ${item.active ? 'text-[#525252]' : 'text-[#D7D7D7]'}
+                        ${idx === hour ? '!text-[#FAFAFA] ' : ''}
+                    `}>{item.hour}</p>
+                    </Button>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Hours;

app/component/date/dateTime/TabsTime.js

@@ -1,7 +0,0 @@
-function TabsTime() {
-    return (
-        <div>TabsTime</div>
-    )
-}
-
-export default TabsTime;

app/component/date/dateTime/index.js

@@ -1,21 +1,45 @@
+'use client';
+
 import { useState } from "react";
-import Tabs from "../../Tabs"
+import Tabs from "../../Tabs";
+import Hours from "./Hours";
+import { Button } from "@mui/material";
+import ArrowLeftB from "@/components/icons/ArrowLeftB";
 
 const listTab = ['صبح', 'بعد از ظهر'];
+const nameHours = ['hours_morning', 'hours_afternoon']
 
-function DateTime() {
+function DateTime({ doctor }) {
 
   const [value, setValue] = useState(0);
+  const [hour, setHour] = useState(0);
+
   const handleChange = (event, newValue) => setValue(newValue);
 
   return (
-    <div className="mx-[122px]">
+    <div className="w-full">
       <Tabs
         isSm={true}
         value={value}
         listTab={listTab}
         handleChange={handleChange}
       />
+      <Hours
+        hour={hour}
+        value={value}
+        doctor={doctor}
+        setHour={setHour}
+        nameHours={nameHours}
+      />
+      <div className="w-full flex justify-end">
+        <Button
+          className="!gap-[4px] !px-[12px] !py-[8px] !min-w-[157px]"
+          variant="contained"
+        >
+          <p className="text-[#EFEFEF] text-[16px] font-medium">تایید نوبت</p>
+          <ArrowLeftB />
+        </Button>
+      </div>
     </div>
   )
 }