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/kvn.png", test: "mahdi", title: "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, { id: "garfdsy", name: "Gary Goodspeed", thumb: "/images/kvn.png", 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", name: "Gary Goodspeed", thumb: "/images/kvn.png", test: "mahdi", title: "بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", video: 4, min: 30, subItems: [ { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", }, { name: "شرکت های بزرگ خیلی خوب هستند", }, { name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", }, ], }, ]; function Testt() { 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, name, thumb, test, title, video, min }, index) => { return ( {(provided) => (
  • {`${name}

    {title}

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