|  |  |  | @ -5,36 +5,34 @@ import blackLeftArrow from "./black-arrow-left.svg"; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const BreadCrumb = ({ breadCrumbs }) => { | 
			
		
	
		
			
				
					|  |  |  |  |   return ( | 
			
		
	
		
			
				
					|  |  |  |  |     <div> | 
			
		
	
		
			
				
					|  |  |  |  |       <div className="flex flex-row items-center"> | 
			
		
	
		
			
				
					|  |  |  |  |         {breadCrumbs.map((breadCrumb, index) => ( | 
			
		
	
		
			
				
					|  |  |  |  |           <div className="flex flex-row items-center" key={index}> | 
			
		
	
		
			
				
					|  |  |  |  |             <span | 
			
		
	
		
			
				
					|  |  |  |  |               className={`cursor-pointer text-xs hover:text-blue-900  ${ | 
			
		
	
		
			
				
					|  |  |  |  |                 breadCrumb.active ? "text-blue-900" : "text-blue-400" | 
			
		
	
		
			
				
					|  |  |  |  |               }`}
 | 
			
		
	
		
			
				
					|  |  |  |  |             > | 
			
		
	
		
			
				
					|  |  |  |  |               {breadCrumb.name} | 
			
		
	
		
			
				
					|  |  |  |  |               {console.log(breadCrumb.active)} | 
			
		
	
		
			
				
					|  |  |  |  |             </span> | 
			
		
	
		
			
				
					|  |  |  |  |             {Number(index) !== breadCrumbs.length - 1 && ( | 
			
		
	
		
			
				
					|  |  |  |  |               <div> | 
			
		
	
		
			
				
					|  |  |  |  |                 {console.log(breadCrumbs.length - 1)} | 
			
		
	
		
			
				
					|  |  |  |  |                 {/* {breadCrumb.active === true ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                   <img src={grayLeftArrow} className="w-10" /> | 
			
		
	
		
			
				
					|  |  |  |  |                 ) : ( | 
			
		
	
		
			
				
					|  |  |  |  |                   <img src={blackLeftArrow} className="w-10" /> | 
			
		
	
		
			
				
					|  |  |  |  |                 )} */} | 
			
		
	
		
			
				
					|  |  |  |  |                 {Number(index) === breadCrumbs.length - 2 ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                   <img src={blackLeftArrow} className="w-4" /> | 
			
		
	
		
			
				
					|  |  |  |  |                 ) : ( | 
			
		
	
		
			
				
					|  |  |  |  |                   <img src={grayLeftArrow} className="w-4" /> | 
			
		
	
		
			
				
					|  |  |  |  |                 )} | 
			
		
	
		
			
				
					|  |  |  |  |               </div> | 
			
		
	
		
			
				
					|  |  |  |  |             )} | 
			
		
	
		
			
				
					|  |  |  |  |           </div> | 
			
		
	
		
			
				
					|  |  |  |  |         ))} | 
			
		
	
		
			
				
					|  |  |  |  |       </div> | 
			
		
	
		
			
				
					|  |  |  |  |     <div className="flex flex-row items-center"> | 
			
		
	
		
			
				
					|  |  |  |  |       {breadCrumbs.map((breadCrumb, index) => ( | 
			
		
	
		
			
				
					|  |  |  |  |         <div className="flex flex-row items-center" key={index}> | 
			
		
	
		
			
				
					|  |  |  |  |           <span | 
			
		
	
		
			
				
					|  |  |  |  |             className={`cursor-pointer text-xs hover:text-blue-900  ${ | 
			
		
	
		
			
				
					|  |  |  |  |               breadCrumb.active ? "text-blue-900" : "text-blue-400" | 
			
		
	
		
			
				
					|  |  |  |  |             }`}
 | 
			
		
	
		
			
				
					|  |  |  |  |           > | 
			
		
	
		
			
				
					|  |  |  |  |             {breadCrumb.name} | 
			
		
	
		
			
				
					|  |  |  |  |             {console.log(breadCrumb.active)} | 
			
		
	
		
			
				
					|  |  |  |  |           </span> | 
			
		
	
		
			
				
					|  |  |  |  |           {Number(index) !== breadCrumbs.length - 1 && ( | 
			
		
	
		
			
				
					|  |  |  |  |             <div> | 
			
		
	
		
			
				
					|  |  |  |  |               {console.log(breadCrumbs.length - 1)} | 
			
		
	
		
			
				
					|  |  |  |  |               {/* {breadCrumb.active === true ? ( | 
			
		
	
		
			
				
					|  |  |  |  |               <img src={grayLeftArrow} className="w-10" /> | 
			
		
	
		
			
				
					|  |  |  |  |             ) : ( | 
			
		
	
		
			
				
					|  |  |  |  |               <img src={blackLeftArrow} className="w-10" /> | 
			
		
	
		
			
				
					|  |  |  |  |             )} */} | 
			
		
	
		
			
				
					|  |  |  |  |               {Number(index) === breadCrumbs.length - 2 ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                 <img src={blackLeftArrow} className="w-4" alt="arrow" /> | 
			
		
	
		
			
				
					|  |  |  |  |               ) : ( | 
			
		
	
		
			
				
					|  |  |  |  |                 <img src={grayLeftArrow} className="w-4" alt="arrow" /> | 
			
		
	
		
			
				
					|  |  |  |  |               )} | 
			
		
	
		
			
				
					|  |  |  |  |             </div> | 
			
		
	
		
			
				
					|  |  |  |  |           )} | 
			
		
	
		
			
				
					|  |  |  |  |         </div> | 
			
		
	
		
			
				
					|  |  |  |  |       ))} | 
			
		
	
		
			
				
					|  |  |  |  |     </div> | 
			
		
	
		
			
				
					|  |  |  |  |   ); | 
			
		
	
		
			
				
					|  |  |  |  | }; | 
			
		
	
	
		
			
				
					|  |  |  | 
 |