|  |  |  | @ -2,36 +2,13 @@ import React, { useState } from "react"; | 
			
		
	
		
			
				
					|  |  |  |  | import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; | 
			
		
	
		
			
				
					|  |  |  |  | import "./App.css"; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | const finalSpaceCharacters = [ | 
			
		
	
		
			
				
					|  |  |  |  |   { | 
			
		
	
		
			
				
					|  |  |  |  |     id: "gary", | 
			
		
	
		
			
				
					|  |  |  |  |     name: "Gary Goodspeed", | 
			
		
	
		
			
				
					|  |  |  |  |     thumb: "/images/gary.png", | 
			
		
	
		
			
				
					|  |  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |  |   { | 
			
		
	
		
			
				
					|  |  |  |  |     id: "cato", | 
			
		
	
		
			
				
					|  |  |  |  |     name: "Little Cato", | 
			
		
	
		
			
				
					|  |  |  |  |     thumb: "/images/cato.png", | 
			
		
	
		
			
				
					|  |  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |  |   { | 
			
		
	
		
			
				
					|  |  |  |  |     id: "kvn", | 
			
		
	
		
			
				
					|  |  |  |  |     name: "KVN", | 
			
		
	
		
			
				
					|  |  |  |  |     thumb: "/images/kvn.png", | 
			
		
	
		
			
				
					|  |  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |  |   { | 
			
		
	
		
			
				
					|  |  |  |  |     id: "mooncake", | 
			
		
	
		
			
				
					|  |  |  |  |     name: "Mooncake", | 
			
		
	
		
			
				
					|  |  |  |  |     thumb: "/images/mooncake.png", | 
			
		
	
		
			
				
					|  |  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |  |   { | 
			
		
	
		
			
				
					|  |  |  |  |     id: "quinn", | 
			
		
	
		
			
				
					|  |  |  |  |     name: "Quinn Ergon", | 
			
		
	
		
			
				
					|  |  |  |  |     thumb: "/images/quinn.png", | 
			
		
	
		
			
				
					|  |  |  |  |   }, | 
			
		
	
		
			
				
					|  |  |  |  | ]; | 
			
		
	
		
			
				
					|  |  |  |  | import CircleInCircle from "../MiniComponents/CircleInCircle"; | 
			
		
	
		
			
				
					|  |  |  |  | import Button from "../ButtonDesign/Button"; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | function Testt() { | 
			
		
	
		
			
				
					|  |  |  |  |   const [characters, updateCharacters] = useState(finalSpaceCharacters); | 
			
		
	
		
			
				
					|  |  |  |  | function Testt({ items, vod }) { | 
			
		
	
		
			
				
					|  |  |  |  |   //   const [characters, updateCharacters] = useState(finalSpaceCharacters);
 | 
			
		
	
		
			
				
					|  |  |  |  |   const [characters, updateCharacters] = useState(items); | 
			
		
	
		
			
				
					|  |  |  |  |   const [activeAccordion, setActiveAccordion] = useState(null); | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   function handleOnDragEnd(result) { | 
			
		
	
		
			
				
					|  |  |  |  |     if (!result.destination) return; | 
			
		
	
	
		
			
				
					|  |  |  | @ -50,31 +27,123 @@ function Testt() { | 
			
		
	
		
			
				
					|  |  |  |  |         <DragDropContext onDragEnd={handleOnDragEnd}> | 
			
		
	
		
			
				
					|  |  |  |  |           <Droppable droppableId="characters"> | 
			
		
	
		
			
				
					|  |  |  |  |             {(provided) => ( | 
			
		
	
		
			
				
					|  |  |  |  |               <ul | 
			
		
	
		
			
				
					|  |  |  |  |                 className="characters" | 
			
		
	
		
			
				
					|  |  |  |  |               <section | 
			
		
	
		
			
				
					|  |  |  |  |                 className="w-full flex flex-col bg-gray-200" | 
			
		
	
		
			
				
					|  |  |  |  |                 {...provided.droppableProps} | 
			
		
	
		
			
				
					|  |  |  |  |                 ref={provided.innerRef} | 
			
		
	
		
			
				
					|  |  |  |  |               > | 
			
		
	
		
			
				
					|  |  |  |  |                 {characters.map(({ id, name, thumb }, index) => { | 
			
		
	
		
			
				
					|  |  |  |  |                   return ( | 
			
		
	
		
			
				
					|  |  |  |  |                     <Draggable key={id} draggableId={id} index={index}> | 
			
		
	
		
			
				
					|  |  |  |  |                       {(provided) => ( | 
			
		
	
		
			
				
					|  |  |  |  |                         <li | 
			
		
	
		
			
				
					|  |  |  |  |                           ref={provided.innerRef} | 
			
		
	
		
			
				
					|  |  |  |  |                           {...provided.draggableProps} | 
			
		
	
		
			
				
					|  |  |  |  |                           {...provided.dragHandleProps} | 
			
		
	
		
			
				
					|  |  |  |  |                 {items.map((item, index) => ( | 
			
		
	
		
			
				
					|  |  |  |  |                   <Draggable index={index}> | 
			
		
	
		
			
				
					|  |  |  |  |                     {(provided) => ( | 
			
		
	
		
			
				
					|  |  |  |  |                       <div | 
			
		
	
		
			
				
					|  |  |  |  |                         className="flex flex-col" | 
			
		
	
		
			
				
					|  |  |  |  |                         ref={provided.innerRef} | 
			
		
	
		
			
				
					|  |  |  |  |                         {...provided.draggableProps} | 
			
		
	
		
			
				
					|  |  |  |  |                         {...provided.dragHandleProps} | 
			
		
	
		
			
				
					|  |  |  |  |                       > | 
			
		
	
		
			
				
					|  |  |  |  |                         {/* parent */} | 
			
		
	
		
			
				
					|  |  |  |  |                         <div | 
			
		
	
		
			
				
					|  |  |  |  |                           className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${ | 
			
		
	
		
			
				
					|  |  |  |  |                             activeAccordion === item | 
			
		
	
		
			
				
					|  |  |  |  |                               ? "border-surfaceBorder " | 
			
		
	
		
			
				
					|  |  |  |  |                               : "border-secondary" | 
			
		
	
		
			
				
					|  |  |  |  |                           } cursor-pointer`}
 | 
			
		
	
		
			
				
					|  |  |  |  |                           onClick={() => | 
			
		
	
		
			
				
					|  |  |  |  |                             setActiveAccordion( | 
			
		
	
		
			
				
					|  |  |  |  |                               activeAccordion === item ? null : item | 
			
		
	
		
			
				
					|  |  |  |  |                             ) | 
			
		
	
		
			
				
					|  |  |  |  |                           } | 
			
		
	
		
			
				
					|  |  |  |  |                         > | 
			
		
	
		
			
				
					|  |  |  |  |                           <div className="characters-thumb"> | 
			
		
	
		
			
				
					|  |  |  |  |                             <img src={thumb} alt={`${name} Thumb`} /> | 
			
		
	
		
			
				
					|  |  |  |  |                           </div> | 
			
		
	
		
			
				
					|  |  |  |  |                           <p>{name}</p> | 
			
		
	
		
			
				
					|  |  |  |  |                         </li> | 
			
		
	
		
			
				
					|  |  |  |  |                       )} | 
			
		
	
		
			
				
					|  |  |  |  |                     </Draggable> | 
			
		
	
		
			
				
					|  |  |  |  |                   ); | 
			
		
	
		
			
				
					|  |  |  |  |                 })} | 
			
		
	
		
			
				
					|  |  |  |  |                 {provided.placeholder} | 
			
		
	
		
			
				
					|  |  |  |  |               </ul> | 
			
		
	
		
			
				
					|  |  |  |  |                           <CircleInCircle | 
			
		
	
		
			
				
					|  |  |  |  |                             parentClassName={"bg-secondary w-0 h- "} | 
			
		
	
		
			
				
					|  |  |  |  |                             childClassName={false} | 
			
		
	
		
			
				
					|  |  |  |  |                           /> | 
			
		
	
		
			
				
					|  |  |  |  |                           <h2 className="flex-1 mr-5 text-sm">{item.title}</h2> | 
			
		
	
		
			
				
					|  |  |  |  |                           {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="" | 
			
		
	
		
			
				
					|  |  |  |  |                             className="w-3 ml-2" | 
			
		
	
		
			
				
					|  |  |  |  |                           /> | 
			
		
	
		
			
				
					|  |  |  |  |                         </div> | 
			
		
	
		
			
				
					|  |  |  |  |                         {/* child */} | 
			
		
	
		
			
				
					|  |  |  |  |                         {activeAccordion === item && | 
			
		
	
		
			
				
					|  |  |  |  |                           item.subItems.map((subItem, i) => ( | 
			
		
	
		
			
				
					|  |  |  |  |                             <div | 
			
		
	
		
			
				
					|  |  |  |  |                               key={i} | 
			
		
	
		
			
				
					|  |  |  |  |                               className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer transition-all duration-500 ease-in-out" | 
			
		
	
		
			
				
					|  |  |  |  |                             > | 
			
		
	
		
			
				
					|  |  |  |  |                               <div className="flex flex-row items-center"> | 
			
		
	
		
			
				
					|  |  |  |  |                                 {vod === !true && ( | 
			
		
	
		
			
				
					|  |  |  |  |                                   <img | 
			
		
	
		
			
				
					|  |  |  |  |                                     src="images/accordionGroup2725.svg" | 
			
		
	
		
			
				
					|  |  |  |  |                                     className="w-3" | 
			
		
	
		
			
				
					|  |  |  |  |                                     alt="line" | 
			
		
	
		
			
				
					|  |  |  |  |                                   /> | 
			
		
	
		
			
				
					|  |  |  |  |                                 )} | 
			
		
	
		
			
				
					|  |  |  |  |                                 <span | 
			
		
	
		
			
				
					|  |  |  |  |                                   className={`text-sm ${ | 
			
		
	
		
			
				
					|  |  |  |  |                                     vod === true ? "mr-0" : "mr-3" | 
			
		
	
		
			
				
					|  |  |  |  |                                   }`}
 | 
			
		
	
		
			
				
					|  |  |  |  |                                 > | 
			
		
	
		
			
				
					|  |  |  |  |                                   {i + 1} | 
			
		
	
		
			
				
					|  |  |  |  |                                 </span> | 
			
		
	
		
			
				
					|  |  |  |  |                               </div> | 
			
		
	
		
			
				
					|  |  |  |  |                               <div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div> | 
			
		
	
		
			
				
					|  |  |  |  |                               <p className="text-sm flex-1">{subItem.name}</p> | 
			
		
	
		
			
				
					|  |  |  |  |                               <div className="flex flex-row items-center justify-end gap-x-3 flex-1"> | 
			
		
	
		
			
				
					|  |  |  |  |                                 {vod ? ( | 
			
		
	
		
			
				
					|  |  |  |  |                                   <> | 
			
		
	
		
			
				
					|  |  |  |  |                                     <div className="flex flex-row items-center ml-7"> | 
			
		
	
		
			
				
					|  |  |  |  |                                       <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={"پخش"} | 
			
		
	
		
			
				
					|  |  |  |  |                                       /> | 
			
		
	
		
			
				
					|  |  |  |  |                                     </div> | 
			
		
	
		
			
				
					|  |  |  |  |                                   </> | 
			
		
	
		
			
				
					|  |  |  |  |                                 ) : ( | 
			
		
	
		
			
				
					|  |  |  |  |                                   <> | 
			
		
	
		
			
				
					|  |  |  |  |                                     <img | 
			
		
	
		
			
				
					|  |  |  |  |                                       src="images/accordionGroup2724.svg" | 
			
		
	
		
			
				
					|  |  |  |  |                                       className="w-8 rounded" | 
			
		
	
		
			
				
					|  |  |  |  |                                       alt="delete-button" | 
			
		
	
		
			
				
					|  |  |  |  |                                     /> | 
			
		
	
		
			
				
					|  |  |  |  |                                     <img | 
			
		
	
		
			
				
					|  |  |  |  |                                       src="images/accordionGroup2723.svg" | 
			
		
	
		
			
				
					|  |  |  |  |                                       className="w-8 rounded" | 
			
		
	
		
			
				
					|  |  |  |  |                                       alt="edit-button" | 
			
		
	
		
			
				
					|  |  |  |  |                                     /> | 
			
		
	
		
			
				
					|  |  |  |  |                                   </> | 
			
		
	
		
			
				
					|  |  |  |  |                                 )} | 
			
		
	
		
			
				
					|  |  |  |  |                               </div> | 
			
		
	
		
			
				
					|  |  |  |  |                             </div> | 
			
		
	
		
			
				
					|  |  |  |  |                           ))} | 
			
		
	
		
			
				
					|  |  |  |  |                         {provided.placeholder} | 
			
		
	
		
			
				
					|  |  |  |  |                       </div> | 
			
		
	
		
			
				
					|  |  |  |  |                     )} | 
			
		
	
		
			
				
					|  |  |  |  |                   </Draggable> | 
			
		
	
		
			
				
					|  |  |  |  |                 ))} | 
			
		
	
		
			
				
					|  |  |  |  |               </section> | 
			
		
	
		
			
				
					|  |  |  |  |             )} | 
			
		
	
		
			
				
					|  |  |  |  |           </Droppable> | 
			
		
	
		
			
				
					|  |  |  |  |         </DragDropContext> | 
			
		
	
	
		
			
				
					|  |  |  | @ -90,3 +159,65 @@ function Testt() { | 
			
		
	
		
			
				
					|  |  |  |  | } | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | export default Testt; | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  | Testt.defaultProps = { | 
			
		
	
		
			
				
					|  |  |  |  |   vod: false, | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |   items: [ | 
			
		
	
		
			
				
					|  |  |  |  |     { | 
			
		
	
		
			
				
					|  |  |  |  |       id: "gary", | 
			
		
	
		
			
				
					|  |  |  |  |       title: | 
			
		
	
		
			
				
					|  |  |  |  |         "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", | 
			
		
	
		
			
				
					|  |  |  |  |       video: 4, | 
			
		
	
		
			
				
					|  |  |  |  |       min: 30, | 
			
		
	
		
			
				
					|  |  |  |  |       subItems: [ | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           name: "شرکت های بزرگ خیلی خوب هستند", | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ", | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |       ], | 
			
		
	
		
			
				
					|  |  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |  |     { | 
			
		
	
		
			
				
					|  |  |  |  |       id: "kevin", | 
			
		
	
		
			
				
					|  |  |  |  |       title: | 
			
		
	
		
			
				
					|  |  |  |  |         "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", | 
			
		
	
		
			
				
					|  |  |  |  |       video: 4, | 
			
		
	
		
			
				
					|  |  |  |  |       min: 30, | 
			
		
	
		
			
				
					|  |  |  |  | 
 | 
			
		
	
		
			
				
					|  |  |  |  |       subItems: [ | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           name: "شرکت های بزرگ خیلی خوب هستند", | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ", | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |       ], | 
			
		
	
		
			
				
					|  |  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |  |     { | 
			
		
	
		
			
				
					|  |  |  |  |       id: "rafiqaneh", | 
			
		
	
		
			
				
					|  |  |  |  |       title: | 
			
		
	
		
			
				
					|  |  |  |  |         "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", | 
			
		
	
		
			
				
					|  |  |  |  |       video: 4, | 
			
		
	
		
			
				
					|  |  |  |  |       min: 30, | 
			
		
	
		
			
				
					|  |  |  |  |       subItems: [ | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           name: "شرکت های بزرگ خیلی خوب هستند", | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |         { | 
			
		
	
		
			
				
					|  |  |  |  |           name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟  ", | 
			
		
	
		
			
				
					|  |  |  |  |         }, | 
			
		
	
		
			
				
					|  |  |  |  |       ], | 
			
		
	
		
			
				
					|  |  |  |  |     }, | 
			
		
	
		
			
				
					|  |  |  |  |   ], | 
			
		
	
		
			
				
					|  |  |  |  | }; | 
			
		
	
	
		
			
				
					|  |  |  | 
 |