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", name: "Gary Goodspeed", thumb: "/images/kvn.png", test: "mahdi", }, { id: "cato", name: "Little Cato", thumb: "/images/kvn.png", test: "mahdi", }, { id: "kvn", name: "KVN", thumb: "/images/kvn.png", test: "mahdi", }, { id: "mooncake", name: "Mooncake", thumb: "/images/kvn.png", test: "mahdi", }, { id: "quinn", name: "Quinn Ergon", thumb: "/images/kvn.png", test: "mahdi", }, ]; 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; // const items = Array.from(characters); // const [reorderedItem] = items.splice(result.source.index, 1); // items.splice(result.destination.index, 0, reorderedItem); // updateCharacters(items); // } 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 (

Final Space Characters

{(provided) => (
{characters.map((item, { id, name }, index) => ( {(provided) => (
{/* parent */}
setActiveAccordion( activeAccordion === item ? null : item ) } >

{name}

{vod && (

دقیقه: {item.min}

ویدیو: {item.video}

)}
{provided.placeholder}
)}
))}
)}

Images from{" "} Final Space Wiki

); } 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: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", // }, // ], // }, // ], }; // 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", // }, // { // id: "cato", // name: "Little Cato", // thumb: "/images/kvn.png", // test: "mahdi", // }, // { // id: "kvn", // name: "KVN", // thumb: "/images/kvn.png", // test: "mahdi", // }, // { // id: "mooncake", // name: "Mooncake", // thumb: "/images/kvn.png", // test: "mahdi", // }, // { // id: "quinn", // name: "Quinn Ergon", // thumb: "/images/kvn.png", // test: "mahdi", // }, // ]; // function Testt() { // 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 ( //
//
//

Final Space Characters

// // // {(provided) => ( //
    // {characters.map(({ id, name, thumb, test }, index) => { // return ( // // {(provided) => ( //
  • //
    // {`${name} //
    //

    {name}

    // {test} //
  • // )} //
    // ); // })} // {provided.placeholder} //
// )} //
//
//
//

// Images from{" "} // // Final Space Wiki // //

//
// ); // } // export default Testt;