update src/components/Datepicker/Calender/index.js, src/components/Datepicker/CalenderList/index.js and src/components/SearchDesign/SearchBox/index.js

src/components/Datepicker/Calender/index.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import { Calendar } from "react-multi-date-picker";
 import persian from "react-date-object/calendars/persian";
@@ -14,10 +14,19 @@ const weekDays = [
   "جمعه",
 ];
 
-const Calender = () => {
+const Calender = ({ minimumDate, maximumDate, setDate, date }) => {
+  // const [date, setDate] = useState("1401/03/01");
   return (
     <div className="calender-list">
       <Calendar
+        onChange={setDate}
+        value={date}
+        minDate={minimumDate}
+        maxDate={maximumDate}
+        weekDays={weekDays}
+        arrow={false}
+        calendar={persian}
+        locale={persian_fa}
         mapDays={({ date }) => {
           let props = {};
           let isWeekend = date.weekDay.index === 6;
@@ -26,10 +35,6 @@ const Calender = () => {
 
           return props;
         }}
-        weekDays={weekDays}
-        arrow={false}
-        calendar={persian}
-        locale={persian_fa}
       />
     </div>
   );

src/components/Datepicker/CalenderList/index.js

@@ -1,14 +1,17 @@
-import React from "react";
+import React, { useState } from "react";
 
 import Calender from "../Calender";
-import Button from "../../ButtonDesign/Button/";
+import Button from "../../ButtonDesign/Button";
+import SearchBox from "../../SearchDesign/SearchBox";
 
 const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
+  const [date, setDate] = useState("1401/02/01");
+
   return (
-    <div className="flex flex-col bg-white mx-auto">
-      <div className="w-[96%] mx-auto flex flex-row items-center">
+    <div className="flex flex-col bg-white mx-auto p-5">
+      <div className="w-[96%] mx-auto flex flex-row items-center justify-between mb-7">
         {/* right side */}
-        <div className=" flex flex-row items-center divide-x-2 divide-surfaceBorder divide-x-reverse">
+        <div className="flex flex-row items-center  divide-x-2 divide-surfaceBorder divide-x-reverse">
           {/* right side */}
           <div className="flex flex-row items-center px-4 text-primaryText">
             <img src={rightArrow} class="w-8" alt="right-arrow" />
@@ -26,10 +29,20 @@ const CalenderList = ({ buttons, leftArrow, rightArrow }) => {
             ))}
           </div>
         </div>
+        {/* left side ---> search box */}
+        <SearchBox
+          searchBoxHolder={"w-[220px]"}
+          className="bg-background border-background focus:border-background focus:ring-background"
+        />
       </div>
       {/* ? calender list */}
-      <div className="flex flex-wrap space-between gap-5">
-        <Calender />
+      <div className="flex flex-wrap justify-around mx-auto gap-x-5">
+        <Calender
+          onChange={setDate}
+          value={date}
+          minimumDate={"1401/02/01"}
+          maximumDate={"1401/02/31"}
+        />
         <Calender />
         <Calender />
         <Calender />