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.
203 lines
6.8 KiB
203 lines
6.8 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", |
|
test: "mahdi", |
|
title: |
|
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
|
video: 4, |
|
min: 30, |
|
subItems: [ |
|
{ |
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
|
}, |
|
{ |
|
name: "شرکت های بزرگ خیلی خوب هستند", |
|
}, |
|
{ |
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
|
}, |
|
], |
|
}, |
|
{ |
|
id: "garfdsy", |
|
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", |
|
test: "mahdi", |
|
title: |
|
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
|
video: 4, |
|
min: 30, |
|
subItems: [ |
|
{ |
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
|
}, |
|
{ |
|
name: "شرکت های بزرگ خیلی خوب هستند", |
|
}, |
|
{ |
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
|
}, |
|
], |
|
}, |
|
]; |
|
|
|
function Testt({ vod }) { |
|
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 ( |
|
<section> |
|
<DragDropContext onDragEnd={handleOnDragEnd}> |
|
<Droppable droppableId="characters"> |
|
{(provided) => ( |
|
<section |
|
className="characters w-full flex flex-col bg-gray-200" |
|
id="container" |
|
{...provided.droppableProps} |
|
ref={provided.innerRef} |
|
> |
|
{characters.map( |
|
({ id, title, video, min, item, subItems, name }, index) => { |
|
return ( |
|
<Draggable key={id} draggableId={id} index={index}> |
|
{(provided) => ( |
|
<div |
|
className="flex flex-col" |
|
ref={provided.innerRef} |
|
{...provided.draggableProps} |
|
{...provided.dragHandleProps} |
|
> |
|
{/* parent */} |
|
<div |
|
onClick={() => |
|
setActiveAccordion( |
|
activeAccordion === item ? null : item |
|
) |
|
} |
|
className={`flex flex-row items-center justify-between px-3 py-4 border-b-2 ${ |
|
activeAccordion === item |
|
? "border-surfaceBorder " |
|
: "border-secondary" |
|
} cursor-pointer`} |
|
> |
|
<CircleInCircle |
|
parentClassName={"bg-secondary w-0 h- "} |
|
childClassName={false} |
|
/> |
|
<h2 className="flex-1 mr-5 text-sm">{title}</h2> |
|
{vod && ( |
|
<div className="flex flex-row items-center ml-5 "> |
|
<p className="text-xs"> |
|
دقیقه: |
|
<span>{min}</span> |
|
</p> |
|
<div className="w-0.5 h-4 mx-2 bg-surfaceBorder"></div> |
|
<p className="text-xs"> |
|
ویدیو: |
|
<span>{video}</span> |
|
</p> |
|
</div> |
|
)} |
|
<img |
|
src={ |
|
activeAccordion === item |
|
? `images/accordion-.svg` |
|
: `images/accordion+.svg` |
|
} |
|
alt="" |
|
class="w-3 ml-2" |
|
/> |
|
</div> |
|
{provided.placeholder} |
|
</div> |
|
)} |
|
</Draggable> |
|
); |
|
} |
|
)} |
|
{provided.placeholder} |
|
</section> |
|
)} |
|
</Droppable> |
|
</DragDropContext> |
|
</section> |
|
); |
|
} |
|
|
|
export default Testt;
|
|
|