You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

311 lines
9.5 KiB

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;