update App.js, src/components/Accordion/index.js, src/components/Questions/index.js and src/components/Settingss/index.js
parent
d2277aa08d
commit
51c6a43627
7 changed files with 615 additions and 106 deletions
@ -0,0 +1,60 @@ |
|||||||
|
.App { |
||||||
|
text-align: center; |
||||||
|
} |
||||||
|
|
||||||
|
.App-header { |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-size: calc(10px + 1.5vmin); |
||||||
|
} |
||||||
|
|
||||||
|
.App-link { |
||||||
|
color: #61dafb; |
||||||
|
} |
||||||
|
|
||||||
|
@keyframes App-logo-spin { |
||||||
|
from { |
||||||
|
transform: rotate(0deg); |
||||||
|
} |
||||||
|
to { |
||||||
|
transform: rotate(360deg); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.characters { |
||||||
|
list-style: none; |
||||||
|
padding-left: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.characters li { |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
border: solid 2px #d0d0d0; |
||||||
|
border-radius: 0.2em; |
||||||
|
padding: 0.5em 0.8em 0.5em 0.5em; |
||||||
|
margin-bottom: 1em; |
||||||
|
} |
||||||
|
|
||||||
|
.characters p { |
||||||
|
max-width: none; |
||||||
|
font-weight: bold; |
||||||
|
margin: 0; |
||||||
|
} |
||||||
|
|
||||||
|
.characters-thumb { |
||||||
|
overflow: hidden; |
||||||
|
flex-shrink: 0; |
||||||
|
width: 2em; |
||||||
|
height: 2em; |
||||||
|
background-color: #e8e8e8; |
||||||
|
padding: 0.5em; |
||||||
|
margin-right: 0.5em; |
||||||
|
} |
||||||
|
|
||||||
|
.characters-thumb img { |
||||||
|
display: block; |
||||||
|
width: 100%; |
||||||
|
height: auto; |
||||||
|
} |
||||||
@ -0,0 +1,249 @@ |
|||||||
|
import React, { useState } from "react"; |
||||||
|
import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; |
||||||
|
import "./App.css"; |
||||||
|
import CircleInCircle from "../CircleInCircle"; |
||||||
|
import Button from "../Button"; |
||||||
|
|
||||||
|
function Testt({ vod, finalSpaceCharacters }) { |
||||||
|
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((item, index) => ( |
||||||
|
<Draggable key={item.id} draggableId={item.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">{item.title}</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="" |
||||||
|
class="w-3 ml-2" |
||||||
|
/> |
||||||
|
</div> |
||||||
|
{/* child */} |
||||||
|
{activeAccordion === item && |
||||||
|
item.subItems.map((subItem, i) => ( |
||||||
|
<div className="flex flex-row items-center justify-between p-3 border-b-2 border-surfaceBorder cursor-pointer transition-all duration-500 ease-in-out"> |
||||||
|
<div className="flex flex-row items-center"> |
||||||
|
{vod === !true && ( |
||||||
|
<img |
||||||
|
src="images/accordionGroup2725.svg" |
||||||
|
className="w-3" |
||||||
|
alt="line" |
||||||
|
/> |
||||||
|
)} |
||||||
|
<span |
||||||
|
className={`text-sm ${ |
||||||
|
vod === true ? "mr-0" : "mr-3" |
||||||
|
}`}
|
||||||
|
> |
||||||
|
{i + 1} |
||||||
|
</span> |
||||||
|
</div> |
||||||
|
<div className="w-0.5 h-5 mx-3 bg-surfaceBorder"></div> |
||||||
|
<p className="text-sm flex-1">{subItem.name}</p> |
||||||
|
<div className="flex flex-row items-center justify-end gap-x-3 flex-1"> |
||||||
|
{vod ? ( |
||||||
|
<> |
||||||
|
<div className="flex flex-row items-center ml-7"> |
||||||
|
<p className="text-xs"> |
||||||
|
دقیقه: |
||||||
|
<span>{item.min}</span> |
||||||
|
</p> |
||||||
|
<Button |
||||||
|
className="px-2 py-1 text-primary text-sm border border-surfaceBorder rounded mr-4" |
||||||
|
text={"پخش"} |
||||||
|
/> |
||||||
|
</div> |
||||||
|
</> |
||||||
|
) : ( |
||||||
|
<> |
||||||
|
<img |
||||||
|
src="images/accordionGroup2724.svg" |
||||||
|
className="w-8 rounded" |
||||||
|
alt="delete-button" |
||||||
|
/> |
||||||
|
<img |
||||||
|
src="images/accordionGroup2723.svg" |
||||||
|
className="w-8 rounded" |
||||||
|
alt="edit-button" |
||||||
|
/> |
||||||
|
</> |
||||||
|
)} |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
))} |
||||||
|
{provided.placeholder} |
||||||
|
</div> |
||||||
|
)} |
||||||
|
</Draggable> |
||||||
|
))} |
||||||
|
{provided.placeholder} |
||||||
|
</section> |
||||||
|
)} |
||||||
|
</Droppable> |
||||||
|
</DragDropContext> |
||||||
|
</section> |
||||||
|
); |
||||||
|
} |
||||||
|
|
||||||
|
export default Testt; |
||||||
|
|
||||||
|
Testt.defaultProps = { |
||||||
|
finalSpaceCharacters: [ |
||||||
|
{ |
||||||
|
id: "1", |
||||||
|
title: |
||||||
|
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "2", |
||||||
|
title: |
||||||
|
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "3", |
||||||
|
name: "KVN", |
||||||
|
thumb: "/images/kvn.png", |
||||||
|
title: |
||||||
|
"بخش دوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید2؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
|
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "4", |
||||||
|
name: "Mooncake", |
||||||
|
thumb: "/images/kvn.png", |
||||||
|
title: |
||||||
|
"بخش سوم: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید3؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
{ |
||||||
|
id: "5", |
||||||
|
title: |
||||||
|
"بخش اول: فصل اول جدایی و رهایی: آیا بازگشت نزدیک است؟ دیگران چه می گونید؟", |
||||||
|
video: 4, |
||||||
|
min: 30, |
||||||
|
subItems: [ |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "شرکت های بزرگ خیلی خوب هستند", |
||||||
|
}, |
||||||
|
{ |
||||||
|
name: "چگونه با رژیم مناسب بدن سالم تری داشته باشیم؟ ", |
||||||
|
}, |
||||||
|
], |
||||||
|
}, |
||||||
|
], |
||||||
|
}; |
||||||
@ -0,0 +1,203 @@ |
|||||||
|
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; |
||||||
Loading…
Reference in new issue