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}
// {test}
//
// )}
//
// );
// })}
// {provided.placeholder}
//
// )}
//
//
//
//
// Images from{" "}
//
// Final Space Wiki
//
//
//
// );
// }
// export default Testt;