|  |  | @ -1,26 +1,52 @@ | 
			
		
	
		
		
			
				
					
					|  |  |  | import React, { useState } from "react"; |  |  |  | import React, { useState } from "react"; | 
			
		
	
		
		
			
				
					
					|  |  |  | import CircleInCircle from "../../MiniComponents/CircleInCircle"; |  |  |  | import CircleInCircle from "../../MiniComponents/CircleInCircle"; | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | import Button from "../../ButtonDesign/Button"; | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  | const AccordionDesign1 = ({ items }) => { |  |  |  | const AccordionDesign1 = ({ items, vod }) => { | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |   const [activeAccordion, setActiveAccordion] = useState(null); |  |  |  |   const [activeAccordion, setActiveAccordion] = useState(null); | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |   return ( |  |  |  |   return ( | 
			
		
	
		
		
			
				
					
					|  |  |  |     <section className="w-full flex flex-col "> |  |  |  |     <section className="w-full flex flex-col bg-gray-200"> | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |       {items.map((item, index) => ( |  |  |  |       {items.map((item, index) => ( | 
			
		
	
		
		
			
				
					
					|  |  |  |         <div className="flex flex-col" key={index}> |  |  |  |         <div className="flex flex-col" key={index}> | 
			
		
	
		
		
			
				
					
					|  |  |  |           {/* parent */} |  |  |  |           {/* parent */} | 
			
		
	
		
		
			
				
					
					|  |  |  |           <div |  |  |  |           <div | 
			
		
	
		
		
			
				
					
					|  |  |  |             className="flex flex-row items-center justify-between px-3 py-5  border-b-2 border-secondary cursor-pointer" |  |  |  |             className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${ | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |               activeAccordion === item | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 ? "border-surfaceBorder " | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 : "border-secondary" | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             } cursor-pointer`}
 | 
			
		
	
		
		
			
				
					
					|  |  |  |             onClick={() => |  |  |  |             onClick={() => | 
			
		
	
		
		
			
				
					
					|  |  |  |               setActiveAccordion(activeAccordion === item ? null : item) |  |  |  |               setActiveAccordion(activeAccordion === item ? null : item) | 
			
		
	
		
		
			
				
					
					|  |  |  |             } |  |  |  |             } | 
			
		
	
		
		
			
				
					
					|  |  |  |           > |  |  |  |           > | 
			
		
	
		
		
			
				
					
					|  |  |  |             <CircleInCircle |  |  |  |             <CircleInCircle | 
			
		
	
		
		
			
				
					
					|  |  |  |               parentClassName={"bg-secondaryDark  w-3 h-3 "} |  |  |  |               parentClassName={"bg-secondary w-3 h-3 "} | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |               childClassName={false} |  |  |  |               childClassName={false} | 
			
		
	
		
		
			
				
					
					|  |  |  |             /> |  |  |  |             /> | 
			
		
	
		
		
			
				
					
					|  |  |  |             <h2 className="flex-1 mr-7 text-sm">{item.title}</h2> |  |  |  |             <h2 className="flex-1 mr-5 text-sm">{item.title}</h2> | 
			
				
				
			
		
	
		
		
			
				
					
					|  |  |  |             <img src="images/accordion+.svg" alt="" class="w-3 ml-2" /> |  |  |  |             {vod && ( | 
			
				
				
			
		
	
		
		
	
		
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |               <div className="flex flex-row items-center ml-5 "> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 <p className="text-xs"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                   دقیقه: | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                   <span>{item.min}</span> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 </p> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 <div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 <p className="text-xs"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                   ویدیو: | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                   <span>{item.video}</span> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 </p> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |               </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             )} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             <img | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |               src={ | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                 activeAccordion === item | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                   ? `images/accordion-.svg` | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                   : `images/accordion+.svg` | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |               } | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |               alt="" | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |               class="w-3 ml-2" | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |             /> | 
			
		
	
		
		
			
				
					
					|  |  |  |           </div> |  |  |  |           </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |           {/* child */} |  |  |  |           {/* child */} | 
			
		
	
		
		
			
				
					
					|  |  |  |           {activeAccordion === item && |  |  |  |           {activeAccordion === item && | 
			
		
	
	
		
		
			
				
					|  |  | @ -37,6 +63,20 @@ const AccordionDesign1 = ({ items }) => { | 
			
		
	
		
		
			
				
					
					|  |  |  |                 <div className="w-0.5 h-6 mx-3 bg-surfaceBorder"></div> |  |  |  |                 <div className="w-0.5 h-6 mx-3 bg-surfaceBorder"></div> | 
			
		
	
		
		
			
				
					
					|  |  |  |                 <p className="text-sm flex-1">{subItem.name}</p> |  |  |  |                 <p className="text-sm flex-1">{subItem.name}</p> | 
			
		
	
		
		
			
				
					
					|  |  |  |                 <div className="flex flex-row items-center justify-end gap-x-3 flex-1"> |  |  |  |                 <div className="flex flex-row items-center justify-end gap-x-3 flex-1"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                   {vod ? ( | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                     <> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                       <p className="text-xs"> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                         دقیقه: | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                         <span>{item.min}</span> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                       </p> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                       <Button | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                         className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4" | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                         text={"پخش"} | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                       /> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                     </> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                   ) : ( | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                     <> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                       {" "} | 
			
		
	
		
		
			
				
					
					|  |  |  |                       <img |  |  |  |                       <img | 
			
		
	
		
		
			
				
					
					|  |  |  |                         src="images/accordionGroup2724.svg" |  |  |  |                         src="images/accordionGroup2724.svg" | 
			
		
	
		
		
			
				
					
					|  |  |  |                         className="w-8 rounded" |  |  |  |                         className="w-8 rounded" | 
			
		
	
	
		
		
			
				
					|  |  | @ -46,7 +86,9 @@ const AccordionDesign1 = ({ items }) => { | 
			
		
	
		
		
			
				
					
					|  |  |  |                         src="images/accordionGroup2723.svg" |  |  |  |                         src="images/accordionGroup2723.svg" | 
			
		
	
		
		
			
				
					
					|  |  |  |                         className="w-8 rounded" |  |  |  |                         className="w-8 rounded" | 
			
		
	
		
		
			
				
					
					|  |  |  |                         alt="edit-button" |  |  |  |                         alt="edit-button" | 
			
		
	
		
		
			
				
					
					|  |  |  |                   /> |  |  |  |                       />{" "} | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                     </> | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |                   )} | 
			
		
	
		
		
			
				
					
					|  |  |  |                 </div> |  |  |  |                 </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |               </div> |  |  |  |               </div> | 
			
		
	
		
		
			
				
					
					|  |  |  |             ))} |  |  |  |             ))} | 
			
		
	
	
		
		
			
				
					|  |  | @ -55,18 +97,16 @@ const AccordionDesign1 = ({ items }) => { | 
			
		
	
		
		
			
				
					
					|  |  |  |     </section> |  |  |  |     </section> | 
			
		
	
		
		
			
				
					
					|  |  |  |   ); |  |  |  |   ); | 
			
		
	
		
		
			
				
					
					|  |  |  | }; |  |  |  | }; | 
			
		
	
		
		
			
				
					
					|  |  |  | // accordionGroup2723.svg
 |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | // accordionGroup2724.svg
 |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | // accordionGroup2725.svg
 |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | // accordion-.svg
 |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | // accordion+.svg
 |  |  |  |  | 
			
		
	
		
		
			
				
					
					|  |  |  | export default AccordionDesign1; |  |  |  | export default AccordionDesign1; | 
			
		
	
		
		
			
				
					
					|  |  |  | 
 |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  | AccordionDesign1.defaultProps = { |  |  |  | AccordionDesign1.defaultProps = { | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |   vod: true, | 
			
		
	
		
		
			
				
					
					|  |  |  |   items: [ |  |  |  |   items: [ | 
			
		
	
		
		
			
				
					
					|  |  |  |     { |  |  |  |     { | 
			
		
	
		
		
			
				
					
					|  |  |  |       title: |  |  |  |       title: | 
			
		
	
		
		
			
				
					
					|  |  |  |         "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |  |  |  |         "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       video: 4, | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       min: 30, | 
			
		
	
		
		
			
				
					
					|  |  |  |       subItems: [ |  |  |  |       subItems: [ | 
			
		
	
		
		
			
				
					
					|  |  |  |         { |  |  |  |         { | 
			
		
	
		
		
			
				
					
					|  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", | 
			
		
	
	
		
		
			
				
					|  |  | @ -81,7 +121,10 @@ AccordionDesign1.defaultProps = { | 
			
		
	
		
		
			
				
					
					|  |  |  |     }, |  |  |  |     }, | 
			
		
	
		
		
			
				
					
					|  |  |  |     { |  |  |  |     { | 
			
		
	
		
		
			
				
					
					|  |  |  |       title: |  |  |  |       title: | 
			
		
	
		
		
			
				
					
					|  |  |  |         "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", |  |  |  |         "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       video: 4, | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       min: 30, | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  | 
 | 
			
		
	
		
		
			
				
					
					|  |  |  |       subItems: [ |  |  |  |       subItems: [ | 
			
		
	
		
		
			
				
					
					|  |  |  |         { |  |  |  |         { | 
			
		
	
		
		
			
				
					
					|  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", | 
			
		
	
	
		
		
			
				
					|  |  | @ -96,7 +139,9 @@ AccordionDesign1.defaultProps = { | 
			
		
	
		
		
			
				
					
					|  |  |  |     }, |  |  |  |     }, | 
			
		
	
		
		
			
				
					
					|  |  |  |     { |  |  |  |     { | 
			
		
	
		
		
			
				
					
					|  |  |  |       title: |  |  |  |       title: | 
			
		
	
		
		
			
				
					
					|  |  |  |         "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", |  |  |  |         "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", | 
			
				
				
			
		
	
		
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       video: 4, | 
			
		
	
		
		
			
				
					
					|  |  |  |  |  |  |  |       min: 30, | 
			
		
	
		
		
			
				
					
					|  |  |  |       subItems: [ |  |  |  |       subItems: [ | 
			
		
	
		
		
			
				
					
					|  |  |  |         { |  |  |  |         { | 
			
		
	
		
		
			
				
					
					|  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", | 
			
		
	
	
		
		
			
				
					|  |  | 
 |