import React, { useState } from "react"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import "./App.css"; import CircleInCircle from "../MiniComponents/CircleInCircle"; import Button from "../ButtonDesign/Button"; const finalSpaceCharacters = [ { id: "gary", test: "mahdi", title: "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, { id: "garfdsy", test: "mahdi", title: "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, { id: "kvn", name: "KVN", thumb: "/images/kvn.png", test: "mahdi", title: "بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, { id: "mooncake", name: "Mooncake", thumb: "/images/kvn.png", test: "mahdi", title: "بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, { id: "garfsddsfy", test: "mahdi", title: "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, ]; function Testt({ vod }) { const [activeAccordion, setActiveAccordion] = useState(null); const [characters, updateCharacters] = useState(finalSpaceCharacters); function handleOnDragEnd(result) { if (!result.destination) return; const items = Array.from(characters); const [reorderedItem] = items.splice(result.source.index, 1); items.splice(result.destination.index, 0, reorderedItem); updateCharacters(items); } return (
{(provided) => (
{characters.map( ({ id, title, video, min, item, subItems, name }, index) => { return ( {(provided) => (
{/* parent */}
setActiveAccordion( activeAccordion === item ? null : item ) } className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${ activeAccordion === item ? "border-surfaceBorder " : "border-secondary" } cursor-pointer`} >

{title}

{vod && (

دقیقه: {min}

ویدیو: {video}

)}
{provided.placeholder}
)}
); } )} {provided.placeholder}
)}
); } export default Testt;