|
|
|
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 (
|
|
|
|
<div className="App">
|
|
|
|
<header className="App-header">
|
|
|
|
<h1>Final Space Characters</h1>
|
|
|
|
<DragDropContext onDragEnd={handleOnDragEnd}>
|
|
|
|
<Droppable droppableId="characters">
|
|
|
|
{(provided) => (
|
|
|
|
<section
|
|
|
|
className="w-full flex flex-col bg-gray-200"
|
|
|
|
{...provided.droppableProps}
|
|
|
|
ref={provided.innerRef}
|
|
|
|
>
|
|
|
|
{characters.map((item, { id, name }, index) => (
|
|
|
|
<Draggable key={id} draggableId={id} index={index}>
|
|
|
|
{(provided) => (
|
|
|
|
<div
|
|
|
|
key={index}
|
|
|
|
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
|
|
|
|
)
|
|
|
|
}
|
|
|
|
>
|
|
|
|
<CircleInCircle
|
|
|
|
parentClassName={"bg-secondary w-0 h- "}
|
|
|
|
childClassName={false}
|
|
|
|
/>
|
|
|
|
<h2 className="flex-1 mr-5 text-sm">{name}</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>
|
|
|
|
{provided.placeholder}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</Draggable>
|
|
|
|
))}
|
|
|
|
</section>
|
|
|
|
)}
|
|
|
|
</Droppable>
|
|
|
|
</DragDropContext>
|
|
|
|
</header>
|
|
|
|
<p>
|
|
|
|
Images from{" "}
|
|
|
|
<a href="https://final-space.fandom.com/wiki/Final_Space_Wiki">
|
|
|
|
Final Space Wiki
|
|
|
|
</a>
|
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
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 (
|
|
|
|
// <div className="App">
|
|
|
|
// <header className="App-header">
|
|
|
|
// <h1>Final Space Characters</h1>
|
|
|
|
// <DragDropContext onDragEnd={handleOnDragEnd}>
|
|
|
|
// <Droppable droppableId="characters">
|
|
|
|
// {(provided) => (
|
|
|
|
// <ul
|
|
|
|
// className="characters"
|
|
|
|
// {...provided.droppableProps}
|
|
|
|
// ref={provided.innerRef}
|
|
|
|
// >
|
|
|
|
// {characters.map(({ id, name, thumb, test }, index) => {
|
|
|
|
// return (
|
|
|
|
// <Draggable key={id} draggableId={id} index={index}>
|
|
|
|
// {(provided) => (
|
|
|
|
// <li
|
|
|
|
// ref={provided.innerRef}
|
|
|
|
// {...provided.draggableProps}
|
|
|
|
// {...provided.dragHandleProps}
|
|
|
|
// >
|
|
|
|
// <div className="characters-thumb">
|
|
|
|
// <img src={thumb} alt={`${name} Thumb`} />
|
|
|
|
// </div>
|
|
|
|
// <p>{name}</p>
|
|
|
|
// <span className="p-10 bg-red-600">{test}</span>
|
|
|
|
// </li>
|
|
|
|
// )}
|
|
|
|
// </Draggable>
|
|
|
|
// );
|
|
|
|
// })}
|
|
|
|
// {provided.placeholder}
|
|
|
|
// </ul>
|
|
|
|
// )}
|
|
|
|
// </Droppable>
|
|
|
|
// </DragDropContext>
|
|
|
|
// </header>
|
|
|
|
// <p>
|
|
|
|
// Images from{" "}
|
|
|
|
// <a href="https://final-space.fandom.com/wiki/Final_Space_Wiki">
|
|
|
|
// Final Space Wiki
|
|
|
|
// </a>
|
|
|
|
// </p>
|
|
|
|
// </div>
|
|
|
|
// );
|
|
|
|
// }
|
|
|
|
|
|
|
|
// export default Testt;
|