|  |  |  | @ -1,12 +1,15 @@ | 
			
		
	
		
			
				
					|  |  |  |  | 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"> | 
			
		
	
		
			
				
					|  |  |  |  |           {/* right side */} | 
			
		
	
	
		
			
				
					|  |  |  | @ -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 /> | 
			
		
	
	
		
			
				
					|  |  |  | 
 |